CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Wonder
Wonder

Reputation: 1020

Ajax.BeginForm: disable button while loading

Got a working AJAX form:

@using (Ajax.BeginForm(...))

I want to disable the button while result is loading. If I use this:

$("#submit").click(function () { $("#submit").button().attr('disabled', true).addClass('ui-state-disabled'); })

It disables the button, but form doesnt send anything to the controller. How can I fix that? (and yes, I barely know how to use JS)

Upvotes: 4

Views: 4218

Answers (3)

Nacho
Nacho

Reputation: 153

This would do the trick:

$(document).ajaxStart(function () {
    $("#submit").prop("disabled", true);
});

And then if you need to make it enabled when done:

$(document).ajaxStop(function () {
    $("#submit").prop("disabled", false);
});

Upvotes: 7

silverfighter
silverfighter

Reputation: 6882

do you have anything in here (...) -> @using (Ajax.BeginForm(...))

consider using the options to register AjaxOptions @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))

you should have to options at least if you are using the jqery helpers 

beforeSubmit: CallBackToHandleThinksPreSubmit,  // pre-submit callback 
   success: CallBackToHandleThinksPostSubmit// post-submit callback

I would register to a callback an make the visibility changes...

HTH

Upvotes: 0

jgauffin
jgauffin

Reputation: 101150

Use .ajaxStart to disable the button.

Upvotes: 3

Related Questions