Hide form and display div on form submit
Question
I'm trying to hide the form in div id="first" and show the div id="second" when the submit button is pressed. Below is the code I'm using, but it isn't working. The result is a 'quick' hide of div id="first" and a 'quick' show of div id="second" before the page returns to its original view.
Can someone please help me correct this? Thank you!
$(document).ready(function() { $("#myform").submit(function(e) { $("#first").hide(); $("#second").show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <div id="first" class="1" style="display:"> <form action="/student/webdesign/2015/4th/04_50/tinker/hideDiv/hide.php" method="post" id="myform"> <p> <label for="textfield">Text Field:</label> <input type="text" name="name" id="name"> <br> <input type=submit formmethod="POST"> </p> </form> </div> <div id="second" class="2" style="display:none"> test </div>
1 answers
solution1
9 ACCPTED 2016-01-07 20:59:17
Its probably because the default event is being executed on when the form is being submitted. Give this a try.
$(document).ready(function() {
$("#myform").submit(function(e) {
e.preventDefault();
$("#first").hide();
$("#second").show();
});
});
Give this a read as well - https://api.jquery.com/event.preventdefault/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.