Menu
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>
692
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/
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
