'Jquery prevent multiple submit

I want to prevent multiple submit if someone click on one of the submit buttons multiple times.

How can unbind or undelgate in this case the call of my custom function do_some_stuff that is only happens one time, because I try some of the jquery methods, but I think I did something wrong. Thanks

$(function() {
    $('div.ajax').delegate('form button', 'click', function(e) {
        $(this).do_some_stuff();
        e.preventDefault();
    });
});
jquery


Solution 1:[1]

There are two ways of doing this as pointed out by cHao.

$('form button').prop('disabled', true);

or

$('form button').attr('disabled', 'disabled');

Solution 2:[2]

when you click the button within the function add the attr(disabled) which will make the button inactive. 

$("form Button").attr("disabled","1");

should prevent multiple submissions

Solution 3:[3]

If you have users who insist on having an active submit button all the time you can use a variable to track the progress. Something like this:

saving_record = 0; //set variable to show if form is in submission
$(document).ready(function () {
    $('#form').on('submit', function (e) {
        if (saving_record === 0) { //If not submitted yet, submit form
            saving_record = 1; //Set variable to show form is in submission
            $.ajax({
                success: function (data) {
                    saving_record = 0; //Reset variable to allow record update
                },
                error: function (data) {
                    saving_record = 0; //Reset variable to allow record update in case of error
                }
            })
        }
    });
});

Solution 4:[4]

If you are using ASP.NET MVC Data Annotations for Client side Validation, you have to validate the form first - 

// To prevent multiple post
function buttonsubmit() {
    $('form').submit(function () {
        if ($('form').valid()) {
            $(this).find("input[type='submit']").prop('disabled', true);
        }
    });
}

Solution 5:[5]

$(document).ready(function(){
  $('div.ajax form').submit(function(){
     $(this).do_some_stuff();
     return false;
   });          
});

Solution 6:[6]

This works on submit

$("form").submit(function() {
    // submit more than once return false
    $(this).submit(function() {
        return false;
    });
    // submit once return true
    return true;
});

Solution 7:[7]

The one() event did not prevent multiple submits in my case.

This code was used instead:

    <script>
    $(document).ready(function (ev) {
        $("#SaveAndQuit").on('click', function (ev) {             
            var $form = $(this).closest('form');

            if ($form.valid()) {
                
                $(this).prop('disabled', true);

                // (optional: if multiple submit button, specify which one has been cliqued to the MVC controler)
                $form.append('<input type="hidden" name="SaveButton" value="SaveAndQuit" /> ');

                $form.submit();
            }
        });

    });

</script>

(Visual studio 2017, MVC project, Jquery 3.1.1)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Simon
Solution 3 mukundi
Solution 4 Abhishek Chandel
Solution 5 Kimon Moutsakis
Solution 6 JDE10
Solution 7 gharel

Related Questions