Как скрыть один div на форме submit и показать другой 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>