如何避免页面多次提交?
How to prevent user clicking on submit button for mutiple times?
In general, we can use javascript below to implement it. We need to run js function
postRender(this) in web page's onload event.
For example:
var submitted = false; var multiple = false; //apply styles/behaviours after page load function postRender(obj) { //no support for NS4 if (!document.getElementsByTagName) return; //no support for non-HTTP if (window.location.protocol != "http:" && window.location.protocol != "https:") return; //go through form elements, adding functionality var inputs = document.getElementsByTagName('input'); for (var i=0;i<inputs.length;i++) { //add handler to prevent multiple submits if (inputs[i].type=='button' || inputs[i].type=='submit' || inputs[i].type=='reset') { if (inputs[i].className=='multiple') inputs[i].onclick = function () { multiple = true; return true; } ; } } //add form submit handler var forms = document.getElementsByTagName('form'); for (var i=0;i<forms.length;i++) { forms[i].onsubmit = function () { //disable multiple form submits if (submitted) { alert("Your request is still being processed. Pleasewait..."); return false; } if (multiple!=true) submitted = true; multiple = false; } ; } }
Note:
1. Sometimes you maybe allow some buttons are clicked for mutiple times, such as
download button. you need to specify class="multiple" for such buttons.
For example:
<input type="submit" class="multiple" name="Download Excel" value="Download Excel">
2. There is another important thing to remember for web page programmer.
Don't try to submit the form on onclick event of submit button.
For example:
<input type="submit" name="Submit" value="Submit" onclick="SubmitForm()">
Please use type="button" instead of type="submit" to avoid that the form are submittwice.
<input type="button" name="Submit" value="Submit" onclick="SubmitForm()">