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:

Code:

<!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

Thread: Form animation on submit

Thread Tools

Search Thread

Form animation on submit

The Following User Says Thank You to djr33 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions