如何隐藏表单提交中的一个div并显示另一个div？

debugcn 发表于 Dev

阿伦·库马雷什（Arun kumaresh）

下面是我的代码。在按钮上单击，我需要提交表单并通过邮寄传递值。然后div#con1应该被隐藏起来，并且应该显示div #con2。在div中，#con2我需要显示通过发布获取的值，但是问题出在单击后，页面会继续重新加载。投票者请提及您的评论

<?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>

Divyesh Savaliya

在您的代码div中隐藏和显示工作正常，但是页面重新加载，这就是为什么它会导致问题的原因，
我建议您使用php代码而不是jquery
。
如果未提交表单，则显示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 } ?>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。