當字段更改時提交AJAX表格

我有一個GET表單，提交時使用AJAX請求更新一個php頁面。當字段更改時提交AJAX表格

我希望這個表單能夠在任何時候改變字段時自動提交，表單主要包含文本輸入和幾個下拉菜單。

我曾嘗試：

onchange="this.form.submit()" - 這工作，但而不是數據AJAXing到PHP頁面，它實際上重定向我的頁面，這是一個沒有去。

<input type="submit"> - 我想這是最後一招，因爲我希望表單自動發送，，但它確實工作，否則。

我知道，發送的形式，每個輸入變化通常不是一個好主意，所以我非常希望它發送表單1-2秒後閒置（顯然輸入東西后） - 如果這是不可能的，那麼每次更改字段都可以接受，因爲它是一個低流量的服務器。

所以我的問題是，通過ajax自動發送表單的正確方法是什麼？

我現在：

     <form method="GET" id="submitRequest" action="showTable.php"> 
         <th><input type="text" id="SSeries" name="SSeries" class="form-control"></th> 
         <th><input type="text" id="SModel" name="SModel" class="form-control"></th> 
         <th><input type="text" id="SSerial" name="SSerial" class="form-control"></th> 
         <th><input type="text" id="SColor" name="SColor" class="form-control"></th> 
         <th><input type="text" id="SStorage" name="SStorage" class="form-control"></th> 
         <th><input type="text" id="SCarrier" name="SCarrier" class="form-control"></th> 
         <th><input type="text" id="SType" name="SType" class="form-control"></th> 
         <th><input type="text" id="SUPC" name="SUPC" class="form-control"></th> 
         <th><input type="text" id="SStatus" name="SStatus" class="form-control"></th> 
         <input type="submit" class="btn btn-success"> 
        </form>

我現在AJAX：

     $(document).ready(function() { 
          $('#submitRequest').submit(function(event) { 
           $.ajax({ // create an AJAX call... 
            data: $('#submitRequest').serialize(), // serialize the form 
            type: $('#submitRequest').attr('method'), // GET or POST from the form 
            url: $('#submitRequest').attr('action'), // the file to call from the form 
            success: function(response) { // on success.. 
             showTable(); 
            } 
           }); 
           event.preventDefault(); 
          }); 
         });

來源

2016-04-28 GrumpyCrouton

請添加一些代碼，這樣我們就可以檢查問題 – Nehal

@ Ms.Nehal我說我的代碼，但是我不要認爲它是我的代碼的問題，因爲它不知道如何正確發送表單。 – GrumpyCrouton

你的輸入標籤沒有'type'屬性 – Nehal

試試這個：

當輸入值變化進而形成將提交，

jQuery("#submitRequest input").change(function(){ 
    $('#submitRequest').submit(); 
});

來源

2016-04-28 13:08:19

沒有解決問題基本上與我所做的一樣，以實現它的工作 – GrumpyCrouton

我能夠修復我的問題通過簡單地改變我的jQuery選擇和功能。

我改變了它從

$('#submitRequest').submit(function(event) {

要

$('.submitForm').on('keyup', function(){

和我添加submitForm到每個輸入類。

來源

2016-04-28 13:11:02 GrumpyCrouton

你可以在變更後阿賈克斯執教，並獲得來自服務器的響應

$("#submitRequest input").change(function(){ 
    var data = { 
     SSeries : $("#SSeries").val(), 
     ... 
    } 

    $.ajax({ 
     url: 'your_url_method', 
     type: 'POST', 
     data: data, 
     success : function(res){ 
      showTable(); 
      console.log("Success, you submit your form" + res); 
     }, 
     error : function(error){ 
      console.log(error, "Error in submit") 
     } 
    }); 

});

來源

2016-04-28 13:18:59

當字段更改時提交AJAX表格

回答

相關問題