Prevent multiple form submit in Asp.net MVC

In this post, we learn how to prevent duplicate form submission in asp.net mvc application, so that unnecessary data gets inserted in database, we have to stop user from clicking submit button twice.

Stopping user from submitting form twice until first process is not complete; this will help your application processing unnecessary request and inserting duplicate data.

We can prevent duplicate form submit using client side script and also from server side code.

First we see how to stop duplicate submit from client side using jQuery, this process is very simple and effective too.

Stop form submit twice in mvc application

Below is a simple form with a input and submit button, method is post, i have used FormCollection (i am assuming you have your form input validation code with you), just to keep it simple!

Input number:

Write following simple peace of JavaScript, which will change the button caption and disable the button immediately after first submit clicked, so until the first submit request is processed, the button will not accept any further click.

<script type="text/javascript">
var isSubmitted = false;
function stopMultipleSubmit() {
		if (!isSubmitted) {
			$('#btnSubmit').val('Submitting.. Please Wait..');
			$("#btnSubmit").prop('disabled', true);
			isSubmitted = true;
			return true;
		}
		else {
			return false;
		}
	}
</script>

in submit button call the above function.

<input type="submit" id="btnSubmit" value="submit" onclick="return stopMultipleSubmit();" />

Make sure you have included right jquery file reference.

Disable button after model validation is successful

Note, in above example I have not used model validation error, now what if we want to use model instead of form collection, and we want the submit button to be disabled only after form validation is successful.

So now, we need to call the javascript function "onsubmit" instead of "onclick" event.

This situation will be little tricky, we cannot call the above stopMultipleSubmit() function on submit directly, then it will disable the submit button, even if the validation fails.

So we have to write an additional submitForm() function to make sure the validation is successful, then only call stopMultipleSubmit() function.

function submitForm() {
    var emailValue = $("#Email").val();
    if (emailValue == "")
        //alert(1);
    else
        stopMultipleSubmit();
    return isSubmitted;
}

Now we call the above submitForm() function on "onsubmit" event of mvc form!

onsubmit event call in javascript function

To call any javascript function in "onsubmit" event in asp.net mvc form, you need to add @using (Html.BeginForm(new { onsubmit = "return submitForm();" }))

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { onsubmit = "return submitForm();" }))
{ 
	// here are my fields
}

which will disable the submit button immediately after the first successful submit, so end user won’t be able to click multiple times.

Email:

You may be interested to read following posts:

 
stop duplicate form submission
Aspnet MVC Training
Asp.net MVC tutorials, learn model view controllers with c#, develop database driven web application using Asp.net MVC framework.
Hire .Net Developer
Free Tutorials
ASP.NET MVC Interview Questions Answers
Asp.Net MVC C# Examples | Join Asp.Net MVC Course | Asp.net Core Tutorial