Prevent or stop multiple form submission with JavaScript
A dynamic web application contains at least one user form and the big issue is data redundancy (duplicate data). The main reason is multiple form submission. when a form is being sent to the server,the user can send the form data multiple times by pressing Enter (return ) key or clicking the submit button.in this example we disable this features while form being submitted.but it fails when user refreshes or click the F5 button . To prevent Refresh event we use Server side check or redirect to another page .
Down load Source Code
prevent-multiple-form-submission
Example for client side check
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prevent multiple form submission with javascript</title>
<script type="text/javascript">
/*
This function validates the form data for rules.
Don't allow multiple form submission.
remember remember
if user refreshes while sending it fails.
for that we check for server side also
*/
var form_submited=false;
function validate(){
if(form_submited==true){alert('Form already submitted.');return false;}
var name=document.ex_form.names.value;//access name value
if(name==''){
alert('Name is required.');
return false;
}
form_submited=true;
document.ex_form.Submit.disabled='disabled';//set form submitt button disabled
document.ex_form.Submit.value='Processing..';//set form submit button text is processing.
return true;
}
</script>
</head>
<body>
<form id="ex_form" name="ex_form" method="post" action="" onSubmit="return validate();">
<input name="names" type="text" id="names" />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html> |
