hide the div with the form after the form is submitted and show a hidden div
Solution 1
You can add an onsubmit
handler. Without using a third-party library such as jQuery, here's a basic way to do it with inline JavaScript:
<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
The onsubmit
is triggered whenever the form is submitted, be it by clicking the Submit
button, programmatically, or if a user hits Enter in a textfield, for example.
I would, however, recommend you use jQuery and a more unobtrusive approach than this inline approach though. If you want to see how to do that with jQuery, here's a jsFiddle that shows one way of accomplishing this. Basically, you would add an id
such as myform
on the form
element and then add this to your JavaScript:
$(document).ready(function() {
$("#myform").submit(function(e) {
$("#first").hide();
$("#second").show();
});
});
Solution 2
First give id to submit button.
<div id="first" class="1" style="display:">
<form>
<input type=submit **id="submit-btn"**>
</form>
</div>
<div id="second" class="2" style="display:none">
test
</div>
Then write Click Event of submit Button
jQuery("#submit-btn").click(function(e)) {
e.preventDefault();
jQuery('#first').hide();
jQuery('#show').show();
}
user2031113
Updated on July 09, 2022Comments
-
user2031113 almost 2 years
so I have this
<div id="first" class="1" style="display:"> <form> <input type=submit> </form> </div> <div id="second" class="2" style="display:none"> test </div>
I want to switch the display option after the form is submitted (the button is pushed). I want the script to become like this after clicking on the submit button
<div id="first" class="1" style="display:none"> <form> <input type=submit> </form> </div> <div id="second" class="2" style="display:"> test </div>