隱藏第一個窗體，然後顯示第二個窗體。 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中做一些表單驗證，但你明白了。