Ajax - Deny double click on submit

Question

How can I prevent a user from double-clicking the submit button in my registration form, which is a partial ajax view?

I ask with regret, as this has already been asked. I just can’t find a clear working answer, now the question is where I am looking. Disabling the button prohibits sending. Using javascript variable varcount + alert + return_false does not reset.

Environment: asp.net mvc3

View: The form displays the load: @RenderPage("_SignupForm.cshtml")

Feed using:

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

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

RegistrationController:

 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")); } 

Answer 1

Try the following script actions:

 $('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, to re-bind the submit event when the form is replaced with new content in the DOM, or the second time it can no longer work.

Answer 2

UPDATE: view does not work because onclick did not return true

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

this will disable the button, and a second click on the button will not work.