0

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>
Improve this question
3
  • 1
    type="submit" change to type="button" if you use type submit it will really reload the page Commented Mar 8, 2016 at 9:09
  • 1
    You need to use AJAX to retrieve the value from the server via a POST request then display it in the #con2 div Commented Mar 8, 2016 at 9:12
  • change submit to click can solve the problem, just need to handle the receive answer from your php Commented Mar 8, 2016 at 9:13

4 Answers 4

Reset to default
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 } ?>
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

i have tried it put in the post im getting empty values
where? in else part?
Try print_r($_POST) and make sure you have entered some text in input field
what you mean? your form has method post so after submitting form you get value entered in text box in $_POST....if not then you are doing something wrong
after put your code jquery script is not working thats the problem
|
0

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.

Improve this answer

Comments

0

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>
Improve this answer

Comments

0 
 $("#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

Improve this answer

2 Comments

He is echoing $_POST inside con2...he can't get that value if you use e.preventDeafult()
He just want to hide and show the div on form submit..so it is also possible without ajax

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.