Question

The full story is I want to disable the submit button on a form’s submission to prevent multiple submissions. One of the problems is the form is an ASP.Net MVC Ajax form – <% using (Ajax.BeginForm … %> – so its javascript onSubmit event is already set and I therefore cannot do this during that event. Unless there’s a way to add to the submit event with jQuery? My testing shows that $(“#form”).submit(…) replaces the submit event and thusly kills MVC’s ajaxy stuff.

So what I’ve done is attached the button-disabling code to the submit button’s click event. That works fine … only it kills the button’s submission abilities (nothing happens other than the button gets disabled). I took it a step further and used jQuery to submit the form from the click event. This borks everything, the ajax response comes back as a downloaded file, I assume because MVC’s ajax stuff got clobbered again. This is where I’m at:

$("#submitButton").click(function ()
{
    var $button = $(this);
    $button.parent().submit();
    $button.attr("disabled", "disabled");
});

Any one know a work-around?

Edit:
So, turns out this actually may be a bug in MVC. Originally I had:

<% using (Ajax.BeginForm("CreateAsync", "Account", new AjaxOptions
    {
        HttpMethod = "POST",
        OnComplete = "create_Complete",
        OnBegin = "create_Begin"
    },
    new { id = "ajaxForm" }))
{ %>
<!-- form stuff -->
<% } %>

$("#ajaxForm").submit(function() {
    $(":submit", this).attr("disabled", "disabled");
});

Notice I was setting the form’s ID and grabbing a jQuery handle to it via that ID. Looks like the simple fact that I’m setting the ID of the form is causing all the issues. In fact, I can break the form submission w/o any jQuery intervention what-so-ever if I set the form ID. So this works totally as advertised:

<% using (Ajax.BeginForm("CreateAsync", "Account", new AjaxOptions
    {
        HttpMethod = "POST",
        OnComplete = "create_Complete",
        OnBegin = "create_Begin"
    }))
{ %>
<!-- form stuff -->
<% } %>

$("form").submit(function() {
    $(":submit", this).attr("disabled", "disabled");
});

Answer 1

Turns out it was a bug. See the edited question for the answer.