Log in

View Full Version : Form animation on submit



tim2011
07-25-2011, 09:48 PM
Hello all, I'm looking for that javascript that displays
an animation in a lightbox or a new page that says "Form
processing...do not refresh" or similar effect after the submit button has
been clicked.

Thanks.

djr33
07-25-2011, 11:51 PM
Are you looking only for the visual effect of this, or do you need some extra functionality attached to it?
You should be able to use onsubmit for the form and trigger a Javascript function that will launch a lightbox window.

tim2011
07-26-2011, 07:33 AM
Thanks. Visual effect.

Is there some existing script that can do this?

djr33
07-26-2011, 04:47 PM
Here's a rough version that you can adjust as needed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submitted Form</title>
<script type="text/javascript">
function submitted() {
document.getElementById('submitteddisplay').style.display = 'block';
}
</script>
<style type="text/css">
div#submitteddisplay { display:none; }
div#submittedbg { position:fixed; width:100%; height:100%; background-color:gray; opacity:0.5; }
div#submitted { margin:auto; position:fixed; margin-top:40%; width:100%; }
div#submitted div { border:10px solid black; width:50%; margin:auto; background-color:white; text-align:center;}
</style>
</head>
<body>

<div id="submitteddisplay">
<div id="submittedbg"></div>
<div id="submitted">
<div>
<p>Submitted. Please wait.</p>
</div>
</div>
</div>


<form onsubmit="submitted();" method="post" action="?">
<input type="submit" />
</form>

</body>
</html>

Use onsubmit="submitted();" on any form you'd like and it will bring up the message hiding the rest of the page. You can remove the background part if you'd like but this way it actually doesn't allow the user to resubmit the form because it is hidden.

Note that you need to copy the CSS and the Javascript from the head section to the head section of your page. And you need to copy the "submitted" divs from the start of the body section, and these must be placed outside any of the rest of your body content. It's best to place them either at the beginning or end of your page, away from your content. Then just add the onsubmit attribute to your form.

Is that close to what you wanted? You can change the content of the innermost div to anything you'd like, including an image or text.


By the way, using the same method you can apply this to any "lightbox" script you'd like. Just use onsubmit="lightboxfunction();" as above and find a lightbox that will allow Javascript activation. (There are many. The only ones that don't do it are those that are set to work only for images.)

tim2011
07-26-2011, 11:12 PM
Thanks a lot