ajax - Prevent double click on submit

Question

How can I prevent the user from double clicking submit button on my signup form which is an ajax partial view?

I regret to ask since this would have already been asked. I just can't find a clear working answer now matter where I search. Disabling the button prevent submit. Using a var javascript clickcount+alert+return_false does not reset.

Environment: asp.net mvc3

View: Form displays onload: @RenderPage("_SignupForm.cshtml")

Submission using:

@using (Ajax.BeginForm("Index", "Signup", null,
     new AjaxOptions
                {
                    UpdateTargetId = "signupForm", 
                    InsertionMode = InsertionMode.Replace, 
                    HttpMethod = "POST",
                    LoadingElementId="progress"
                }
     ))

Submit control: <input type="submit" value="Sign up" />

SignupController :

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(SignupModel formvalues)
{
    Thread.Sleep(5000);

    string errors = "";
    if (TryValidateModel(formvalues))
    {
        errors = SignupAPI.Signup(formvalues); //includes custom validation
    }

    if (ModelState.IsValid == false || string.IsNullOrEmpty(errors) == false)
    {
        ViewBag.Errors = errors;
        return PartialView("_SignupForm", formvalues);
    }
    else
        return Redirect(string.Concat("http://localhost/welcome"));
}

score 19 · Accepted Answer · answered Jun 22 '11 at 05:58

19

Try with the following script:

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

Make sure you execute it also in the success callback of your AJAX request in order to reattach the submit event when the form is replaced with a new content in the DOM, or the second time it might no longer work.

answered Jun 22 '11 at 05:58

Darin Dimitrov

1,023,142
271
3,287
2,928

This works great except if you're listening to `$("form").on("invalid-form.validate"` to capture invalid form submissions, the call to `.valid()` will cause the listener to fire twice. – KyleMit Feb 23 '15 at 19:53
This works great except if you're listening to `$("form").on("invalid-form.validate"` to capture invalid form submissions, the [call to `.valid()` will cause the listener to fire twice](http://stackoverflow.com/q/28683504/1366033). – KyleMit Feb 23 '15 at 21:12

Arturo Martinez · Answer 2 · 2011-06-22T05:53:41.057

0

UPDATE: submission was not working because onclick was not returning true

<input type="submit" value="Sign Up" onclick="this.disabled = true; return true;"/>

this will disable the button and the second click on the button won't work

edited Jun 22 '11 at 05:53

answered Jun 22 '11 at 04:29

Arturo Martinez

3,737
1
22
35

@Arturo: The form fails to submit at all now. – Valamas Jun 22 '11 at 04:31
@Arturo: The form submits, however, for some odd reason, the returned page is only the view and not the surrounding layout. I suspect the ajax call is being circumvented. I have a Thread.Sleep(5000) and I do not see the ajax indicator while waiting for the postback. – Valamas Jun 22 '11 at 04:52
1

can you post your form element once is being rendered in your browser? – Arturo Martinez Jun 22 '11 at 04:55
@Arturo `
`. Before, i had changed the command to `form0.submit()`
– Valamas Jun 22 '11 at 05:00
@Arturo: thanks for trying to help. I tried the new disableElement function and the result is that the form does not post. – Valamas Jun 22 '11 at 05:46
try with the second option, just the submit input `` the problem is that the onclick was not returning true – Arturo Martinez Jun 22 '11 at 05:49
1

@Arturo: same result. Button disables and form does not submit. – Valamas Jun 22 '11 at 05:55

ajax - Prevent double click on submit

2 Answers2

Linked