Form animation on submit

[tentim]

In some web 2.0 forms when you click the submit button,
a kind of animation appears to indicate "Processing".
How is this achieved?

Thanks

[JeffWalden]

First you would need to define a function that would be triggered upon submission of the form. Something like:

<form onsubmit="showProcessingDiv();">

Then you would need to actually write the javascript function:

function showProcessingDiv() {
document.getElementById("ProcessingDiv").className = "Processing";
}

You need a bit of CSS which would hide the processing div initially and also creates a class called "Processing" which shows the div.

#ProcessingDiv {
display: none;
}

.Processing {
display: block;
}

Inside of the processing div you would place the animated image that you would like to indicate that the form is processing.