Html.BeginForm how to avoid multiple form submission?

Question

We have the following code for registration page

@using (Html.BeginForm(MVC.Account.Register(Model.ReturnUrl), FormMethod.Post, new { @id = "register-form" }))
{
    <div class="control-group clear">
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email, new { type = "email", @class = "forbid-lt-gt" })
        <span class="hint raise">Will be user as Username.</span>
        <div class="error">@Html.ValidationMessageFor(m => m.Email)</div>
    </div>
    <div class="control-group clear">
        @Html.LabelFor(m => m.Password)
        @Html.PasswordFor(m => m.Password)
        <span class="hint raise">Length between 6 and 10 characters</span>
        <div class="error">@Html.ValidationMessageFor(m => m.Password)</div>
    </div>
    <div class="control-group clear">
        @Html.LabelFor(m => m.ConfirmPassword)
        @Html.PasswordFor(m => m.ConfirmPassword)
        <div class="error">@Html.ValidationMessageFor(m => m.ConfirmPassword)</div>
    </div>

    <div class="control-group action">
        <button class="btn primary" type="submit">
            <span>Sign up</span>
        </button>
    </div>
    <div class="clear"></div>
}

And the file formBlocker.js to prevent multiple button click

$(function() {
    $('form').one('submit', function () {
        $(this).find('button[type="submit"]').attr('disabled', 'disabled');
    });

    //Enable submit button if data has changed
    $('form').live("input", function () {
        $(this).find('button[type="submit"]').removeAttr('disabled');
    });
});

Usually all is fine, but sometimes it doesn't work and after user clicks several times on button the form can be sent several times to server. Early we had issue that after a click on submit button in IE form was sent to server twice. Now we don't have this issue but it was't fixed.

Thanks you for posting as much information as possible. But the only relevant info is your javascript as it's a known issue, I removed all the irreverent code. — gdoron, Sep 23 '14 at 09:25
Ok, but i thought issue could be in two libraries of jquery. — Arnold_Brhen, Sep 23 '14 at 09:56
I'm not sure how exactly you use those two versions. Regardless the horrific nature of it, if you use jQuery > 1.7 you should stop using `live`, if you user jQuery > 1.9 you **must** stop using `live`. — gdoron, Sep 23 '14 at 10:02

gdoron · Answer 1 · 2014-09-23T09:32:12.627

2

live is dead. dead. It was deprecated in 2.7 and removed in 2.9. DEAD!

I would use this approach:

var serializedData;

$(function () {
    $('form').submit(function () {
        var tempSerializedData = $(this).serialize();
        if (tempSerializedData != serializedData) 
            serializedData = tempSerializedData;
        else 
            return false;

    });
});

edited Sep 23 '14 at 09:32

answered Sep 23 '14 at 09:23

gdoron

147,333
58
291
367

@max, I have no idea what you meant. – gdoron Sep 23 '14 at 13:50

score 2 · Answer 2 · answered Sep 23 '14 at 09:41

Try this Not sure but this is working for me

$('form').one('submit', function () {
        $(this).find('button[type="submit"]').attr('disabled', 'disabled');
        setTimeout(function () {
              $(this).find('button[type="submit"]').attr('disabled', 'disabled');
         }, 20);
    });

Html.BeginForm how to avoid multiple form submission?

2 Answers2