ks********@gmail.com wrote:
Assume there's a form with it's action attribute all set to post to a
URL, but without a submit control. Form submission is done via a link
and I want to prevent the classic "double submit". Ignoring the server
side of things, does anyone see any holes with the following script? It
seems to work, but I'd appreciate other eyes on it. Maybe a
try/catch/finally wrapper of some sort to be sure the link is
re-enabled in the face of an exception. I understand there are (many)
other ways to do this (e.g. temporarily "remove" the link), but I'm
mostly curious about the
this.onclick=falseFn/this.onclick=arguments.callee combo and any
potential gotchas. Thanks.
Two: if the user has JavaScript disabled or not available, they can't
submit the form.
The second (and probably bigger one) is that script execution on the
client is unreliable. You may end up with the form being submitted
multiple times anyway, or the user's first attempt to submit may not
work or be cancelled and your script may block subsequent submissions
unreasonably.
function falseFn() {
return false;
}
// this is the onclick handler for the link
function submitLinkOnclick() {
this.onclick = falseFn; // disable link to prevent double-submit
In order for 'this' to refer to the element on which the onclick
handler has been placed, you must be attaching the function dynamically
using something like:
theLink.onclick = submitLinkOnclick;
var isOkToSubmit = false;
var form = document.getElementById("form");
I'm not a big fan of having an element with an ID the same as the tag
name, then also having a local variable with the same name - what
'form' refers to starts to get confusing. IE will add a 'form'
property to the global object too.
// logic to see if it's OK to submit form (set isOkToSubmit = true)
if (isOkToSubmit) {
Since you changed isOkToSubmit to false above, this will always return
false and the form will never submit.
form.submit();
} else {
alert("blah blah blah");
this.onclick = arguments.callee; // re-enable link
So you will always re-set the onclick to the current function. At what
point were you going to set it to falseFn?
}
return false;
}
The whole approach seems flawed. If you want to try something on the
client, put a submit button in the form and have a global variable (or
the value of some hidden form field) set to 'not submitted' (or false
or whatever). When the form is submitted, check the value to determine
whether to submit the form or not and change the value of the
variable/field to 'submitted' (or true or whatever). The following
example uses the form name to add a property to a global object so you
can keep track of multiple forms:
<script type="text/javascript">
var submittedForms = {};
function checkSubmit(formRef){
if (formRef.name in submittedForms){
alert('submitted');
return false;
}
submittedForms[formRef.name] = true; // Any value will do
}
</script>
<form name="formA" action=""
onsubmit="return checkSubmit(this);">
<!-- rest of form -->.
<input type="submit">
</form>
But it's not a very reliable method of stopping multiple submissions.
--
Rob
