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!

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>

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

Make sure you have included right jquery file reference.

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!

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.

You may be interested to read following posts:

• Ajax form submit in asp.net MVC
• How to submit form in Asp.net MVC