Ajax.BeginForm: disable button while loading

Question

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)

Answer 1

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