Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
107
rated 0 times [  114] [ 7]  / answers: 1 / hits: 31553  / 12 Years ago, fri, february 1, 2013, 12:00:00

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>

More From » forms

 Answers
12

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();
});
});

[#80491] Wednesday, January 30, 2013, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kamronr

Total Points: 749
Total Questions: 110
Total Answers: 122

Location: Dominica
Member since Sat, Nov 5, 2022
2 Years ago
kamronr questions
Mon, Dec 21, 20, 00:00, 3 Years ago
Fri, Oct 16, 20, 00:00, 4 Years ago
Sat, Oct 3, 20, 00:00, 4 Years ago
Sun, Jul 28, 19, 00:00, 5 Years ago
;