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

forms, hide, javascript, onsubmit, show

Solution

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

Problem

Original source