Проверьте значения данных формы и отключите кнопку отправки. Форма jQuery

Question

Я пытаюсь отключить отправку кнопки, чтобы избежать дублирования записей.

Я проверил все SOF, Google и так далее.

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

Чтобы свести к минимуму ваше время и усилия, у меня есть код JSFiddle. http://jsfiddle.net/4gL0f2tz/

Что я пытаюсь сделать.

1. Проверьте, будут ли завершены значения формы (если не бросать ошибку - для этого я использую обязательный атрибут)
2. После того, как форма заполнена со значениями затем отключить кнопку отправки и приступить к обработке страницы.

Вот JQuery фрагмент

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('input:submit').click(function(){ 
      $('p').text("Form submiting....."); 
      $('input:submit').attr("disabled", true); 
      $.ajax({ 
      type: "POST", 
      url: "form_process.php", 
      data: "id=abc" , 
      success: function(){alert('success');} 
      }); 
    }); 
    }); 
    </script> 

Полный код доступен здесь. http://jsfiddle.net/4gL0f2tz/

Примечание: У меня есть код, чтобы отключить кнопку отправки, как я могу отключить после проверки, завершены ли все значения формы, а затем отключить ее.

Answer 1

Я обновил свою скрипку к этому: click here

вы можете просто проверить каждое обязательное поле, его заполнено ли (или что вы хотите), а затем отключить кнопку.

«волшебный» это просто так:

$('input:submit').click(function(evt){ 

// We think any required field is filled 
var filled = true; 
$('input[required]:visible').each(function(key, el) { 
    // Check if a field is not filled (just an example) 
    // you could also do any other checks 
    if ($(el).val() == '') filled = false; 
}); 

if (filled == true) { /* send it */ } 

evt.preventDefault(); 

}); 

но вы должны остановить форму от того, отправить, потому что вы хотите, чтобы отправить форму по запросу AJAX ... Вы можете сделать это с preventDefault()

Answer 2

вы бы это в вашем .submit() функции вместо .click() функции:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('form').submit(function(e){ 
     e.preventDefault(); 

     //validate 
     $(":input",$(this)).each(function(i,v){ 
      if(v.val().trim()==""){ alert("Fix empty field!"); return false; } 
     }); 

     $('p').text("Form submiting....."); 
     $('input:submit', $(this)).attr("disabled", true); 
     $.ajax({ 
     type: "POST", 
     url: "form_process.php", 
     data: "id=abc" , 
     success: function(){alert('success'); 
     $('input:submit', $(this)).removeAttr("disabled"); } 
     }); 
}); 
}); 
</script>