hide the div with the form after the form is submitted and show a hidden div

Question

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>

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