最初のフォームを隠してから2番目のフォームを表示します。 Secndフォームは複数のサブミットを行います

Question

1つの入力フィールドを持つ2つのフォームがあります。ページがロードされると、最初のフォームを表示し、この最初のフォームの送信時に、後で使用するためにセッションに入力された値をPHPで保持したいと考えています。さらに、最初のフォームの提出時に、jqueryを使用して2番目のフォームを再表示したいと思います。 2番目のフォームは複数の送信を行います。私が直面している問題は、提出時の2番目のフォームが最初のフォームを戻し、2つのフォームの提出に問題があるということです。私は第二の書式が一貫していて、最初に一度だけ最初の書式を開こうと思っています。ここで

は、私が働いているコードです：

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

最初のフォームを非表示にする最も簡単な方法は、提出後にdisplay:noneにそのCSSを設定することです。

PHPロジックを一番上に置きます。 session_start()は、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"... 

明らか

を提出されているかどうかに応じて、noneまたはブロックに表示を設定することができますの必要はありません、あなたがする必要はありませんよPHPでいくつかのフォーム検証を行いますが、あなたはそのアイデアを得ます。