/    Sign up×
Community /Pin to ProfileBookmark

Stop multiple submission (unobtrusive)

Copy linkTweet thisAlerts:
Aug 08.2008

Hi all,

I would like to block multiple submission on submit button thanks to a thin unobtrusive javascript code.

To do so, I believe to something like:

[CODE]window.onclick = function () {
this.disabled = true;
}[/CODE]

If you have an idea, that would be very helpfull for me.
Thanks a lot!

Dendicus

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@cgishackAug 08.2008 — what about changing the display style of the button?

myButton.style.display = "none";
Copy linkTweet thisAlerts:
@Totte_chAug 08.2008 — [code=html]<form>
...
<input type=submit value="Submit" onClick="this.disabled=true;"></form>[/code]
Copy linkTweet thisAlerts:
@DendicusauthorAug 08.2008 — Thx for your help.

In fact, I had trying to use:
[CODE]<input type=submit value="Submit" onClick="this.disabled=true;">[/CODE]
...but in this case I can't submit the form. Actually, according to my goal that is to stop multiple submit of form (by clicking or keyboard), I would like (if possible) to remplace <input type="submit" /> tag by a string like "Please waiting...".

And I would be very happy to do this this with a unobtrusive script (maybe with DOM interface).
Copy linkTweet thisAlerts:
@JMRKERAug 08.2008 — [code=php]
<html>
<head>
<title>Stop Multiple Submits</title>

</head>
<body>
<button id="btn1"
onclick="document.getElementById('msg').style.display='block';this.disabled=true">
Submit</button>

<div id="msg" style="display:none;background-color:#ffff00">Please waiting...</div>

<button id="btn2"
onclick="document.getElementById('msg').style.display='none';document.getElementById('btn1').disabled=false">
Stop Submit</button>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@DendicusauthorAug 08.2008 — Thanks all for your help.

I have writing a thin script that seems to work well:

[CODE]window.onsubmit = function () {
var formInputs = document.getElementsByTagName('input');
for (var i = 0; i < formInputs.length; i++) {
var theInput = formInputs[i];
if (theInput.type == 'submit') { theInput.disabled = true }
}
}[/CODE]

Have fun ?
Copy linkTweet thisAlerts:
@ScriptageAug 08.2008 — It's best to do this server side, i.e., set a session variable of the epoch time the form data was sent, you can then check this value on subsequent submissions and if there has not been sufficient time before the last attempt ignore the post.

Regards

Carl
Copy linkTweet thisAlerts:
@slaughtersAug 08.2008 — I guess you are not using a validation function on your form fields them.

I usually have a hidden DIV field set to be the same size of the scree, with a "Please Wait" graphics or text inside it.

The first thing I do on entering the validation function is set it to display="block"

Question to anyone:

If you set the submit button to display none - but do not set disabled to be true, couldn't someone resubmit by just hitting the return key?
×

Success!

Help @Dendicus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...