隐藏第一个窗体，然后显示第二个窗体。 Secnd表单执行多个提交

Question

我有两种形式的单个输入字段。当页面加载时我希望显示第一个表单并提交第一个表单时，我想保留在php中的会话中输入的值以备后用。进一步提交第一种形式，我想用jquery取消隐藏第二种形式。第二种形式执行多个提交。我面临的问题是，提交的第二个表单带回了第一个表单，并且在提交这两个表单时遇到问题。我希望第二种形式保持一致，并希望一开始只打开第一种形式。

这里是我一起工作的代码：

JS

<script> 
    $(document).ready(function() { 
     $("#submitvendor").click(function() { 

      $("#vendorform").hide(1000); 

      $("#imeiform").css("display", "block"); 


     }) 
    }); 
</script> 

HTML

<div id="vendorform" class="container" style = " position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;"> 
    <form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" > 
    <div class="form-group"> 
     <label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label> 
     <input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp 
    </div> 
    <input type="submit" id="submitvendor" name="Submit" value="Submit"> 
    </form> 
</div> 
<div id="imeiform" class="container" style = " display: none; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;"> 
    <form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" > 
    <div class="form-group"> 
     <label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label> 
     <input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp 
    </div> 
    <input type="submit" id="imei" class="btn btn-default" name="Submit" value="SUBMIT"> 
    </form> 
</div> 

PHP

<?php 
session_start(); 
include_once('config.php'); 
if (isset($_POST['Submit'])) {  
    if (!isset($_SESSION['vendor'])) { 
     $_SESSION['vendor'] = $_POST['vendorreference']; 
    }  
    echo "Submitted"; 
} 

if (isset($_POST['SUBMIT'])) { 
    $imei = $_POST['imei']; 
    echo "Second form submitted"; 
} 
?> 

Answer 1

可以实现这个简单的使用PHP，

HTML

<div id="vendorform" class="container" style = "display:<?php echo ($top_form == "Y") ? "block": "none"; ?>; position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;"> 
    <form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" > 
     <div class="form-group"> 
      <label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label> 
      <input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp 
     </div> 

     <input type="submit" id="submitvendor" name="first_form" value="Submit"> 
    </form> 
</div> 


<div id="imeiform" class="container" style = "display:<?php echo ($bottom_form == "Y") ? "block": "none"; ?>; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;"> 
    <form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" > 
     <div class="form-group"> 
      <label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label> 
      <input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp     
     </div> 

     <input type="submit" id="imei" class="btn btn-default" name="second_form" value="SUBMIT"> 
    </form> 
</div> 

PHP

<?php 
session_start(); 
include_once('config.php'); 
$top_form = "Y"; 
$bottom_form = "N"; 

if (isset($_POST['first_form'])) {  

    if (!isset($_SESSION['vendor'])) { 
     $_SESSION['vendor'] = $_POST['vendorreference']; 
    }  

    $top_form = "N"; 
    $bottom_form = "Y"; 
} 

if (isset($_POST['second_form'])) { 

    $imei = $_POST['imei']; 
    $top_form = "N"; 
    $bottom_form = "Y"; 
    echo "Second form submitted"; 
} 
?> 

我在它控制风格上设置两个标志行为，让我知道它是否适合你。

Answer 2

隐藏第一种形式的最简单方法是在提交后将其css设置为display:none。

将您的PHP逻辑置于顶端。在任何HTML被发送到浏览器之前，尤其应该接近开始。由于PHP可以知道表单何时提交，因此可以使用它来设置适当的样式。无需使用Javascript

<?php 
session_start(); 
... 
$vendor_style = isset($_POST['Submit'])? 'display:none;': 'display:block;'; 
$imei_style = isset($_POST['Submit'])? 'display:block;': 'display:none;'; 
... 
?> 

然后倒在HTML页面中，您可以设置显示根据第一表单是否已经提交

<form id="vendor" style="<?= $vendor_style ?>" class="form-inline"... 
... 
<form id="imei" style="<?= $imei_style ?>" class="form-inline"... 

没有或块很明显，你将不得不在PHP中做一些表单验证，但你明白了。