Avoiding Duplicate form submission in Asp.net MVC by clicking submit twice

how to avoid double click on submit button in asp.net c#
prevent multiple form submissions server side
prevent duplicate request mvc
asp.net prevent double submit server side
how to prevent multiple clicks on submit button in jquery
asp net core prevent multiple submit
disable button after click html
mvc form submit multiple times

I am rendering a form in Asp.net MVC with a submit button. The page redirects after successful record addition into the database. Following is the code :-

[HttpPost]
public ActionResult Create(BrandPicView brandPic)
{
    if (ModelState.IsValid)
    {
        if (!String.IsNullOrEmpty(brandPic.Picture.PictureUrl))
        {
            Picture picture = new Picture();
            picture.PictureUrl = brandPic.Picture.PictureUrl;
            db.Pictures.Add(picture);
            brandPic.Brand.PictureId = picture.Id;
        }
        db.Brands.Add(brandPic.Brand);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View();
}

But, while testing, I saw that if the form is clicked again and again, the multiple entries are submitted and saved into the database.

How can i make sure that if the form has been submitted once to the server, then no duplicates are submitted.

I don't think this is quite a duplicate of the answer referenced in the comment, since the link is for spring MVC, and this question is for .NET MVC.

I actually spent a few hours on this a while back, and came up with the following. This javascript hooks nicely with the unobtrusive jquery validation, and you can apply it to any form that has <input type="submit". Note that it uses jquery 1.7's on function:

$(document).on('invalid-form.validate', 'form', function () {
    var button = $(this).find('input[type="submit"]');
    setTimeout(function () {
        button.removeAttr('disabled');
    }, 1);
});
$(document).on('submit', 'form', function () {
    var button = $(this).find('input[type="submit"]');
    setTimeout(function () {
        button.attr('disabled', 'disabled');
    }, 0);
});

The setTimeouts are needed. Otherwise, you could end up with a button that is disabled after clicked even when client-side validation fails. We have this in a global javascript file so that it is automatically applied to all of our forms.

ASP.NET prevent multiple submit server side, Net MVC you could use ActionFilters, but on WebForms what you will find on most how check on the server side if my button has been clicked twice ? using the Hidden field solve your issue to prevent multiple click of submit button? On form submission immediately add this to a database table called  On Click of ASP.Net Submit button, we disable the button using javascript so that user cannot submit it again. But disabling the button will prevent the form submission, as you cannot submit the form if the button is disabled. So we call the ASP.Net PostBack event method directly.

Disable the button on Submit clicked. This can be done using JQuery/Java Script.

Look at this example on how to do this.

How to prevent double clicking or multiple Form submission after the , Net Web Form is submitted by the user. You want to prevent double clicking or submitting the form multiple times after the ASP.Net Button is  Without protection it is very easy for an end user to create duplicate records, all it takes it a little latency and a trigger happy user to create twins, triplets and more Typically most ASP.Net MVC use jquery validation so the submit buttons should only disable once we know the form is correct and being posted.

The solution for mvc applications with mvc client side validation should be:

$('form').submit(function () {
    if ($(this).valid()) {
        $(':submit', this).attr('disabled', 'disabled');
    }
});

ASP.Net MVC & JQuery: Preventing multiple clicks by disabling , Typically most ASP.Net MVC use jquery validation so the submit buttons should only disable once we know the form is correct and being  Most of the times we wish to disable the asp.net button control just after the first click so that we may prevent multiple postbacks. This is simply to prevent users from clicking submit again while the form is processing. Mostly file uploads and credit card transactions. Add following code to Page_load.

You can use ajax.BeginForm insted of html.BeginForm to achieve this, if you use OnSuccess insted of OnBegin you can be sure that your method execute successful and after that your button turn to deactivate,with ajax you stay in current view and you can update your current view instead of redirection

@using (Ajax.BeginForm(
new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "dive",
    OnBegin="deactive"
}))
{
//body of your form same as Html.BeginForm
<input type="submit" id="Submit" value="Submit" />
}

and use this jquery in your form:

<script type="text/javascript" language="javascript"> function deactive() { $("#Submit").attr("disabled", true); }</script>

be careful for using ajax you have to call this scrip in the end of your page

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Preventing Double Form Submission < JavaScript, So they double-click on links, double click on submit buttons… Wait? did you just double-clicked that button? submitted the form twice? OOPS! As the ASP.NET has only one form in a page (not ASP.NET MVC), we can also let the onsubmit client event of the form to intercept the double click:

You can use this one. It includes unobtrusive jQuery validation.

$(document).on('submit', 'form', function () {
    var buttons = $(this).find('[type="submit"]');
    if ($(this).valid()) {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', true);
        });
    } else {
        buttons.each(function (btn) {
            $(buttons[btn]).prop('disabled', false);
        });
    } });

For jQuery validation please incllude

~/Scripts/jquery.validate.min.js
~/Scripts/jquery.validate.unobtrusive.min.js

Avoid double submissions on HTML forms, When a user clicks a submit button in a form, their browser makes a Many websites prevent a user from submitting a form more than once by disabling the submit button upon being clicked. The result is that, if using ASP.NET, the corresponding Button Web control's Click event won't fire, since the ASP. There are different ways to avoid double submits, which can be combined: Use JavaScript to disable the button a few ms after click. This will avoid multiple submits being caused by impatient users clicking multiple times on the button. Send a redirect after submit, this is known as Post-Redirect-Get (PRG) pattern. This will avoid multiple submits being caused by users pressing F5 on the result page and ignoring the browser warning that the data will be resend, or navigating back and forth by

Prevent Users from Submitting a Form Twice, asp.net mvc How do I prevent multiple form submission in . and then it continues saying (may be prevented by using JavaScript to disable the button after the first click). Empty, "Looks like you accidentally submitted the same form twice. The tip, titled Stop Users from Double Clicking, showed how to add a small bit of JavaScript to a form's submit button to prevent users from submitting a form more than once. The tip is remarkably simple - in the button's client-side onclick event, simply set the button's disabled property to true .

asp.net mvc How do I prevent multiple form submission in .NET MVC , ASP is executed twice and duplicate entries are inserted into Database. (++​submit > 1) { alert('An attempt was made to submit this form more than once; a button to avoid double clicks- http://forums.asp.net/t/1681765.aspx. How to prevent duplicate form submit Jan 04, 2013 04:43 PM|kobruleht|LINK. Form contains show PDF button which sends POST request. This post request shows pdf file using Content-disposition: inline or Content-disposition: attachment http header.

ASP, Prevent Repeated Requests using ActionFilters in ASP.NET MVC 24 February 2013 on asp.net , asp.net mvc Wherever there is a form or page that allows a user to post up information, there is an opportunity for repeat postings and spam.

Comments
  • This has already been asked a number of times before: stackoverflow.com/questions/2324931/…
  • @Kane , +1 and sorry. I always check if the question has been asked before, but may be it's time i change my spectacles number ;-) .....
  • Possible duplicate of How do I prevent multiple form submission in .NET MVC without using Javascript?
  • Before, i try this out, i want to let you know that my application uses the jquery-1.5.1 as added by VS at the start. Replacing it with 1.7 version effect my application?
  • I can't say, but it shouldn't. If you want to stick with 1.5, you could just change on to live.
  • This is good, but it should be mentioned that you could be using buttons, which this wouldn't find. If you are using both inputs and buttons, you would have to search both like, var button = $(this).find('input[type="submit"], button[type="submit"]');
  • I also like to use $(document.body).append("stuff"); in the setTimeout of the second .on and $(".whatever").remove(); in the setTimeout of the first .on to grey out the page and put a nice spinning gif in the middle with a friendly message for long-running operations like file uploads.
  • This method is clean and simple because it only disables the button if the client-side validation passed and it works on non-ajax forms since I don't have the luxury of time to refactor a bunch of non-ajax forms.
  • From the link you referenced -- The PRG pattern cannot address every scenario of duplicate form submission. Some known duplicate form submissions that PRG cannot solve are: ...if a web user clicks a submission button multiple times before the server response loads (may be prevented by using JavaScript to disable the button after the first click).
  • @olivehour correct, I am stupid and didn't read the question properly.