如何隱藏表單上的一個div提交併顯示另一個div？

Question

以下是我的代碼。點擊按鈕時，我需要提交表單並通過帖子傳遞值。然後div #con1應該隱藏，它應該顯示div #con2。在div #con2我需要顯示我通過帖子得到的值，但問題是點擊頁面不斷重新加載。 downvoters好心提你的意見

<?php include("../view/common/head.php"); ?> 
<script> 
    $(document).ready(function() { 
     $("#myform").submit(function() { 
      $("#con1").hide(); 
      $("#con2").show(); 
     }); 
    }); 
</script> 

<div class="container" id="con1"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <form name="myform" class="form-horizontal" id="myform" method="post"> 
       <ul class="devices"> 
        <li> 
         <div class="dev-inner"> 
          <div class="dei-mid"><p>Computer Tower</p></div> 
          <div class="dei-rgt"> 
           <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000"> 
          </div>     
         </div> 
        </li> 
       </ul> 
       <button type="submit" id="grad-btn">Calculate</button> 
      </div> 
     </form> 
    </div> 
</div> 

<div class="container" id="con2" style="display:none"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <p><?php echo $_POST['computername'];?></p> 
     </div> 
    </div> 
</div> 

Answer 1

在你的代碼div是隱藏和顯示工作，但頁轉到重裝，這就是爲什麼它會導致問題
我建議你使用的PHP代碼，而不是jQuery的
的只需添加條件顯示DIV。
顯示CON1如果表格沒有提交其他節目CON2

<?php include("../view/common/head.php"); ?> 
<?php if(!isset($_POST['computername'])){ ?> <!-Add condition Here-> 
<div class="container" id="con1"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <form name="myform" class="form-horizontal" id="myform" method="post"> 
       <ul class="devices"> 
       <li> 
        <div class="dev-inner"> 
         <div class="dei-mid"><p>Computer Tower</p></div> 
         <div class="dei-rgt"> 
          <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000"> 
         </div>     
        </div> 
       </li> 
      </ul> 
      <button type="submit" id="grad-btn">Calculate</button> 
     </div> 
    </form> 
    </div> 
</div> 
<?php }else{ ?> 
<div class="container" id="con2" style="display:none"> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <p><?php echo $_POST['computername'];?></p> 
    </div> 
    </div> 
</div> 
<?php } ?> 

Answer 2

$("#myform").submit(function(e){ 
    e.preventDefault(); // It will prevent the default action. 
    $("#con1").hide(); 
    $.ajax({ 
     url: "your url", 
     type: "GET", 
     success: function(data){ 
      $("#con2").html(data).show(); 
     } 
    }) 
    }); 

，或者你可以遵循@guradio

Answer 3

試試這個的建議;

<script> 
    $(document).ready(function() { 
     $("#myform").submit(function(evt) { 
      evt.preventDefault(); 
      $("#con1").hide(); 
      $("#con2").show(); 
     }); 
    }); 
</script> 

但它不會用這種方式發佈表單，你必須通過ajax發送數據，或者你應該手動提交表單。

Answer 4

那麼試試這個在這個我已經把按鈕不在狀態，因爲每當我點擊按鈕jQuery是工作良好，但在頁面加載它去像第一階段的第一階段是display:block，第二階段是隱藏。所以我把這個按鈕放在了表格之外。在那之後我公司通過jQuery的獲取數據

<script> 

    $(document).ready(function() { 
     $("#con2").hide(); 

     $("#grad-btn").click(function() { 
      $("#con1").hide(); 
      $("#con2").show(); 
      $("#content").html($("#computerid").val()); 
     }); 
    }); 
</script> 

<div class="container" id="con1"> 
    <div class="row" style="margin-top:150px"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <form name="myform" class="form-horizontal" id="myform" method="post"> 
       <ul class="devices"> 
        <li> 
         <div class="dev-inner"> 
          <div class="dei-mid"><p>Computer Tower</p></div> 
          <div class="dei-rgt"> 
           <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000"> 
          </div>     
         </div> 
        </li> 
       </ul> 

      </div> 
     </form> 
     <button id="grad-btn">Calculate</button> 
    </div> 
</div> 

<div class="container" id="con2" style="margin-top:150px"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <p id="content"></p> 
     </div> 
    </div> 
</div>