Prevent Premature clicking on a submit button while page is refreshed

A

anonieko

Scenario: You have a page that is TOO slow to refresh.
But it allows partial flushing of html contents. I.e.
Submit button already appears but you don't
want your users to click on it prematurely
because other parts are still coming.


Here I put a javascript the will enable only
submit button only after 5 seconds after the page
is load fully.

The prevention of button being clicked twice
is also done .


<html>
<head>
</head>
<body>

<form id="testForm" >
<input id="test" type=text>
<input type=button value="1click only" onclick="dosubmit()">
</form>



<script type="text/javascript">
<!--
var submitted = false;
var timer1=setTimeout('EnableClick()', 5000);

function EnableClick() {
if (typeof submitted == 'undefined') return false;
submitted = false;
}

function dosubmit(method) {
// prevent clicking twice
if (typeof submitted == 'undefined') return false;
if ( submitted ) return false;
submitted = true;
clearTimeout(timer1);
document.testForm.submit();
}
-->
</script>


</body
 
R

RobG

Scenario: You have a page that is TOO slow to refresh.
But it allows partial flushing of html contents. I.e.
Submit button already appears but you don't
want your users to click on it prematurely
because other parts are still coming.

How about using script to prevent submission say by disabling the submit
button. Then have an onload function that enables it.

Your method makes submission of the form dependent on JavaScript, which
it should not be, and makes users wait some arbitrary time that you
think might let the page load fully. Why 5 seconds? Some users will
have to wait longer than necessary, others will likely still not have
the form fully loaded.
Here I put a javascript the will enable only
submit button only after 5 seconds after the page
is load fully.

From the script below, you attempt to wait for 5 seconds after the
script is loaded, not when the page has finished loading. Your script
does not prevent submission anyway.
The prevention of button being clicked twice
is also done .

That should be handled at the server, not the client, and your script
does not guarantee only one submit.
<html>
<head>
</head>
<body>

<form id="testForm" >
<input id="test" type=text>
<input type=button value="1click only" onclick="dosubmit()">
</form>



<script type="text/javascript">
<!--

HTML comments in script elements are completely unnecessary and possibly
harmful, don't use them.
var submitted = false;
var timer1=setTimeout('EnableClick()', 5000);

function EnableClick() {
if (typeof submitted == 'undefined') return false;

'submitted' is defined as 'false', this test will always return false.
submitted = false;
}

function dosubmit(method) {
// prevent clicking twice
if (typeof submitted == 'undefined') return false;

'submitted' is never undefined, this test will always return false.
if ( submitted ) return false;
submitted = true;
clearTimeout(timer1);
document.testForm.submit();

This method of accessing form elements fails in Firefox, you need to
either give the form a name (testForm would be good) or use:

document.forms['testForm'].submit();

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top