Prevent double submission of forms in jQuery

后端 未结 22 1338
旧时难觅i
旧时难觅i 2020-11-22 08:10

I have a form that takes a little while for the server to process. I need to ensure that the user waits and does not attempt to resubmit the form by clicking the button agai

相关标签:
22条回答
  • 2020-11-22 08:40

    If using AJAX to post a form, set async: false should prevent additional submits before the form clears:

    $("#form").submit(function(){
        var one = $("#one").val();
        var two = $("#two").val();
        $.ajax({
          type: "POST",
          async: false,  // <------ Will complete submit before allowing further action
          url: "process.php",
          data: "one="+one+"&two="+two+"&add=true",
          success: function(result){
            console.log(result);
            // do something with result
          },
          error: function(){alert('Error!')}
        });
        return false;
       }
    });
    
    0 讨论(0)
  • 2020-11-22 08:42

    Nathan's code but for jQuery Validate plugin

    If you happen to use jQuery Validate plugin, they already have submit handler implemented, and in that case there is no reason to implement more than one. The code:

    jQuery.validator.setDefaults({
      submitHandler: function(form){
        // Prevent double submit
        if($(form).data('submitted')===true){
          // Previously submitted - don't submit again
          return false;
        } else {
          // Mark form as 'submitted' so that the next submit can be ignored
          $(form).data('submitted', true);
          return true;
        }
      }
    });
    

    You can easily expand it within the } else {-block to disable inputs and/or submit button.

    Cheers

    0 讨论(0)
  • 2020-11-22 08:42

    this code will display loading on the button label, and set button to

    disable state, then after processing, re-enable and return back the original button text**

    $(function () {
    
        $(".btn-Loading").each(function (idx, elm) {
            $(elm).click(function () {
                //do processing
                if ($(".input-validation-error").length > 0)
                    return;
                $(this).attr("label", $(this).text()).text("loading ....");
                $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                    //original event call
                    $.when($(elm).delay(1000).one("click")).done(function () {
                        $(this).animate({ disabled: false }, 1000, function () {
                            $(this).text($(this).attr("label"));
                        })
                    });
                    //processing finalized
                });
            });
        });
        // and fire it after definition
    });
    
    0 讨论(0)
  • 2020-11-22 08:44

    You can stop the second submit by this

    $("form").submit(function() {
            // submit more than once return false
            $(this).submit(function() {
                return false;
            });
            // submit once return true
            return true; // or do what you want to do
        });
    });
    
    0 讨论(0)
提交回复
热议问题