Отключить кнопку отправки при отправке формы

Question

Я использую этот код проверки, я хочу отключить кнопку отправки при отправке формы после проверки. кнопку Submit:

<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.

Answer 2

Вы можете попробовать SO-

$('form#id').submit(function(){ 
    $(this).find('input[type=submit]').prop('disabled', true); 
}); 

How can I disable/enable submit button after jQuery Validation?

Answer 3

Воспользоваться submitHandler свойство validate, как показано ниже:

$(".submitStandard").on('click', function() { 
    var button=$(this); 
    $('form').validate({ 
    ignore: [], 
    rules: { 
     required: { 
     required: true 
     }, 
     shopname: { 
     required: true 
     } 
    }, 
    //.. Other properties 
    //.. 
    submitHandler: function(form) { 
     if(form.valid()) //check if form is valid? 
     { 
      button.prop("disabled", true); 
     } 
    }, 
    //.. 
    }); 
}); 

Answer 4

HTML:

<form id="registrationfrm" method="post"> 
<input type="submit" id="submitbtn" name="submit" value='SAVE' /> 
</form> 

Jquery:

$("#registrationfrm").on("submit",function(){ 
$("#submitbtn").prop('disabled', true); 
});