Question

以下是我的代码。点击按钮我需要提交表单并通过post传递值。然后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>

如何在表单上隐藏一个div并显示另一个div？

4 个答案: