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

Question

Below is my code. On button click I need submit the form and pass the value through post. Then the div #con1 should get hidden and it should show the div #con2 . In the div #con2 I need to display the value which I get through post but the problem is on click the page keeps on reloading. downvoters kindly mention your comments

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

In your code div is hide and show working but page goes reload that's why it causes problem
I suggest you to use php code instead of jquery
Just add condition to show div.
Show con1 if form not submitted else show 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();
       }
     })
  });

or you can follow as suggested by @guradio

Answer 3

try this;

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

but it will not post the form with this way, you have to send data via ajax or you should submit the form manually.

Answer 4

Well try this in this i have put the button out of form because whenever i am clicking the button jquery is working well but on page load it goes to the very first stage like first is display:block and second is hide. So i put the button out of the form. After that i am getting data through 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>