javascript - 隐藏第一个表单，然后显示第二个表单。第二个表单执行多次提交

Question

我有两个带有单个输入字段的表单。当页面加载时，我希望显示第一个表单，并且在提交第一个表单时，我想保留在 php session 中输入的值以供以后使用。进一步提交第一个表单时，我想使用 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";
}
?>

我在顶部设置了两个标志来控制样式行为，请告诉我它是否适合您。