檢查表單數據值並禁用提交按鈕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>