如何在表单上隐藏一个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 } ?>