Sharath Chandra Sharath Chandra - 4 months ago 8
PHP Question

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

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

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.