Submit action getting hit twice while using JQuery

Question

I am writing an ASP.NET MVC 4 application using JQuery and bootstrap.

There is a modal dialog functionality in my site which used to work smoothly until recently when one another developer did some styling related changes in the website.

Following is the code I have written in one of my partial view, I am opening this in a JQuery dialog:

@using (Ajax.BeginForm("ChangeStatus",
    new AjaxOptions { UpdateTargetId = "AboutOrderContainer", HttpMethod = "POST" }))
{
    @Html.HiddenFor(m => m.OrderId)
    <table class="row-fluid">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                Comments&nbsp;(Optional):
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                @Html.TextAreaFor(m => m.Comments, new { @maxlength = 255, @rows=5 })
            </td>
        </tr>        
        <tr>
            <td>                
                <center>
                <input type="submit" title="OK" value="OK" class="btn" />
                    </center>
            </td>
        </tr>
    </table>        
}

This was earlier working fine, as whenever a user hits "OK" button the "ChangeStatus" action was getting called, and a view was getting refreshed.

But now, after that developer has done some changes, the "ChangeStatus" getting hit twice asynchronously which results in run-time errors. I am not sure what is causing the issue.

Following are the script files that gets loaded while this dialog is loaded:

1. ajax.dialog.custom.js
2. bootstrap.js
3. jquery-1.9.1.js
4. jquery-migrate-1.1.1.js
5. jquery-ui-1.10.2.js
6. jquery-unobtrusive-ajax.js
7. jquery.validate.js
8. jquery.validate.unobtrusive.js
9. modernizr-2.5.3.js
10. onmediajquery.js
11. ecommercesite-custom.js

All script files (except, ecommercesite-custom.js) are libraries from JQuery, and bootstrap sites. Following is the code of ecommercesite-custom.js file:

$(document).ready(function () {

    $('input[class*=btn-submit]').click(function (event) {
        if (($(this).closest('form').valid())) {
            $(this).attr("disabled", true);
            $(this).closest('form').submit();
        }
        else {
            $(this).attr("disabled", false);
        }
    });

});

I am not sure what is wrong here. I have tried removing the above js file (i.e. no. 11), but it was of no help. So you can ignore any implications of the above file while thinking about the solution.

Anyone has any idea? Reiterating the fact that the same code was working very well until the other developer changed some styling functionality.

Answer 1

It sounds like you may be submitting the form once from your script, and then again due to the browser's default behavior. Try adding this to the top of your handler:

event.preventDefault();

Answer 2

You change you input type="submit" to input type="button"

Here you are submitting your form twice, one by default behavior of form and another from script

Answer 3

I fixed this issue by changing jquery.unobtrusive-ajax.js file to skip async call if the submit button is having a particular custom attribute.