php - 表单提交时禁用提交按钮

Question

我正在使用此验证代码，我想在验证后提交表单时禁用提交按钮。提交按钮:

<input type="submit" class="submitStandard" value="Save Info" >

验证码:

<script type='text/javascript'>//<![CDATA[
                $(".submitStandard").on('click', function() {
                    $('form').validate({
                        ignore: [],
                        rules: {
                            required: {
                                required: true
                            },
                            shopname: {
                                required: true
                            }
                        },
                        highlight: function(element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function(element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        },
                        errorElement: 'span',
                        errorClass: 'help-block',
                        errorPlacement: function(error, element) {
                            if(element.parent('.input-group').length) {
                                error.insertAfter(element.parent());
                            } else {
                                error.insertAfter(element); 
                            }
                        }
                    });
                });//]]>
            </script>

任何最佳可能的解决方案，当没有任何验证错误时，应该禁用提交。

问题:当我保存信息时，如果我单击提交按钮两次或三次，它会保存值两次或三次，应该单击一次，然后应该禁用它。

Answer 1

只需添加:

$(this).prop("disabled", true);

完整代码:

$(".submitStandard").on('click', function() {
  $(this).prop("disabled", true);
  $('form').validate({
    ignore: [],
    rules: {
      required: {
        required: true
      },
      shopname: {
        required: true
      }
    },
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if(element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element); 
      }
    }
  });
});

或者访问submit事件<form> :

$('form').submit(function(){
    $(this).find(".submitStandard").prop('disabled', true);
});

注意:我可以看到您正在使用通用 $("form") 。不建议这样做，因为当 JavaScript 加载时，它会盲目地应用所有 <form>元素。所以最好给出 id .