Delay on submit button

**nicksalad** · 05-27-2008, 03:31 PM

Hello, i have a form wich submits info to a mssql db, the problem is, i need some script to make the submit button have a delay on show up, i mean, i want to make the users wait at least 1 minute before submit the info, so i was thinking of this way, i know its possible, i've seen it before on some site.

Thank you.

**codeexploiter** · 05-27-2008, 03:40 PM

You can have a small JS code snippet which will show the submit button after the user reaches the last form field or rather if the user enters complete information. The using setTimeout JS function you can enable/display the submit button, in the meantime you can also give some "Please wait, Loading...." message on the screen. If you are looking for this kind of functionality confirm it and I'll give you a demo page...

**nicksalad** · 05-27-2008, 05:01 PM

Originally Posted by codeexploiter

You can have a small JS code snippet which will show the submit button after the user reaches the last form field or rather if the user enters complete information. The using setTimeout JS function you can enable/display the submit button, in the meantime you can also give some "Please wait, Loading...." message on the screen. If you are looking for this kind of functionality confirm it and I'll give you a demo page...

Yes please, more than a form, it has only 1 field, and the submit button, so, even if as soon as you load the page, it starts the countdown would be ok.

Thank you.

**codeexploiter** · 05-29-2008, 07:20 AM

Have a look at the following code, the submit button will be displayed after one minute of complete DOM loading.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>		
		<style type="text/css">
		.off{
			visibility: hidden;
		}
		.on {
			visibility: visible;
		}	
		</style>
		<script type="text/javascript">
			window.onload = function(){
				setTimeout(function(){
					document.getElementById('submit').className = 'on';
				},1000);
			}
		</script>
	</head>
	<body>
		<form name="f" action="" method="get">
			<label>Name </label> <input type="text" name="fname" id="fname" /><br />
			<input type="submit" name="submit" id="submit" value="submit" class="off"/>
		</form>
	</body>
</html>

Please note that if you have multiple JS functions that make use of window.onload event, then you have to club them together as it will execute only one.

**nicksalad** · 02-17-2009, 11:53 AM

Can some one please upgrade the script from above to show a countdown while the button is not visible? When the countdown reaches 0 the submit button shows up. Also after click should be nice that instead of poof, disappear it would say loading or something...

Sorry, real newbie at js.

Thank you.

**nicksalad** · 02-18-2009, 09:47 AM

Some one? Please...

**codeexploiter** · 02-18-2009, 10:08 AM

Here it is

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
            .off {
                visibility: hidden;
            } .on {
                visibility: visible;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var timeInterval = 5; //Delay of showing the submit buttons in seconds. Set the delay that you want to use in your case.
                if (typeof timeInterval === 'undefined' || parseInt(timeInterval) <= 0) {
                    timeInterval = 1
                }
                document.getElementById('timeinfo').innerHTML = timeInterval + " Seconds more to load the submit button";
                var si = setInterval(function() {
                    if (timeInterval === 0) {
                        clearInterval(si);
                    } else {
                        --timeInterval;
                        if (timeInterval !== 0) {
                            document.getElementById('timeinfo').innerHTML = timeInterval + " Seconds more to load the submit button";
                        } else {
                            document.getElementById('timeinfo').className = 'off'; //Hiding the counter area.
                        }
                    }
                }, 1000);
                setTimeout(function() {
                    document.getElementById('submit').className = 'on';
                }, timeInterval * 1000);
            }
        </script>
    </head>
    <body>
        <div id="timeinfo">
        </div>
        <br/>
        <form name="f" action="" method="get">
            <label>
                Name 
            </label>
            <input type="text" name="fname" id="fname" />
            <br/>
            <input type="submit" name="submit" id="submit" value="submit" class="off"/>
        </form>
    </body>
</html>

Hope this helps.

Thread: Delay on submit button

Thread Tools

Search Thread

Delay on submit button

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

Little Upgrade

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

Bookmarks

Bookmarks

Posting Permissions