Hiding first form and then displaying second. Secnd form performs multiple submits

Question

I have two forms with single input fields. When the page loads I want the first form to be displayed and on submit of this first form I want to retain the value entered in a session in php for later use. Further on submit of first form I want to unhide the second form using jquery. The second form performs multiple submits. Problem I am facing is that the second form on submit brings back the first form and I am having trouble with submits of the two forms. I want the second form to stay consistent and wish to open the first form only once initially.

Here is the code I am working with :

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

You can achieve this simply using 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";
}
?>

I've set the two flags at the top which is controlling style behaviour, let me know if it works for you.

Answer 2

The simplest way to hide the first form is to set its css to display:none once it is submitted.

Put your PHP logic at the top. session_start() especially should be near the beginning, before any HTML is sent to the browser. Since PHP can tell when the form is submitted, you can use it to set the appropriate style. No need for Javascript

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

Then down the page in the HTML, you can set the display to none or block depending on whether the first form has been submitted

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

Obviously you'll have to do some form validation in PHP but you get the idea.