jQuery AJAX也發送表單上的隱藏字段

Question

我一直在尋找這一整個上午，但沒有找到任何可以幫助我的東西。我無法弄清楚這本手冊......我從來沒有真正寫過任何jQuery或JavaScript，所以請溫和。

我能弄清楚當用戶離開輸入字段時如何更新數據庫。 :)但我也想發送隱藏的輸入字段。

這裏是我的形式&腳本（表單元素具有相同的名稱，ID所以這個例子，我離開他們去讓事情變得可讀）

<form id="Form"> 
    <input id='idA01-01-2017' type='hidden' value="1234"/> 
    <input id='idB01-01-2017' type='hidden' value="5678"/> 

    <input id='fromA01-01-2017' type='text' value=""/> 
    <input id='toA01-01-2017' type='text' value=""/> 
    <input id='fromB01-01-2017' type='text' value=""/> 
    <input id='toA01-01-2017' type='text' value=""/> 
    <input id="checkA01-01-2017" type="checkbox" value="1"> 
    <input id="checkB01-01-2017" type="checkbox" value="1"> 
    <input id='suggestion01-01-2017' type='text' value=""/> 
</form> 


<script> 
    $('input, select', $('#Form')).change(function(){ 
     var dataFields = $(this).attr('id')+$(this).val(); 
    $.ajax({ 
      url: 'update.php', 
      type: 'POST', 
      data: dataFields, 
      dataType: "json", 
      success: function() {} 
     }) 
    }); 
</script> 

CNC中 我非常感謝我從Axel得到的幫助，但腳本似乎打破了我的複選框。

最初的表格是由onChange="document.Form.submit()"提交的，因爲這個我需要隱藏的輸入框在複選框前面設置值，以防框未被選中。

現在，隨着jQuery的一部分這不起作用，所以我刪除了隱藏的字段，並使用下面的腳本。由於我完全是jQuery的新手，可能有更好的方法，但它似乎工作正常。

$('input, select', $('#Form')).change(function(){ 

    var FORMdata = {}, 

    // get current name 
    currName = $(this).attr('name'), 
    // extract the date 
    sDate = currName.substr(currName.length - 10); 

    //check if a checkbox is changed 
    if (currName.indexOf("checker") >= 0){ 
     if($(this).is(":checked")) { 
      FORMdata[currName] = '1'; 
     } 
     else { 
      FORMdata[currName] = '0'; 
     } 
    }else{ 
     // no checkbox was changed so it was a input field 
     // add current field to data object 
     FORMdata[currName] = $(this).val(); 
     } 

    $.ajax({ 
      url: 'update.php', 
      type: 'POST', 
      data: FORMdata, 
      success: function() { 
      } 
     }) 
    }); 

Answer 1

如果你只想提交您改變字段以及相關的隱藏的人（每個name屬性的結束標識），你可以做這樣的事情：

$('input, select').on('change, input', function(){ 
    var data = {}, 
     // get current name 
     currName = $(this).attr('name'), 
     // extract the date 
     sDate = currName.substr(currName.length - 10); 

    // add current field to data object 
    data[currName] = $(this).val(); 

    // loop over all hidden fields ending with the same 
    // identifier (date) add them to data 
    $('#Form').find("input[type='hidden'][name$='"+ sDate+"']").each(function(){ 
     data[$(this).attr('name')] = $(this).val(); 
    }); 
    $.ajax({ 
     url: 'update.php', 
     type: 'POST', 
     data: data, 
     dataType: "json", 
     success: function() {} 
    }) 
}); 

如果你想發送完整的表單 - jQuery有這樣的功能：serialize。您還可以使用本機方法FormData這在最新的瀏覽器的工作原理：

// also use input event to handle pasting of data 
$('input, select').on('change, input', function(){ 
    // jQuery way (strings only) 
    var formData = $('#Form').serialize(); 
    // or native javascript (older browsers not supported) 
    // var formData = new FormData(document.getElementById("Form")); 
    $.ajax({ 
     url: 'update.php', 
     type: 'POST', 
     data: formData, 
     dataType: "json", 
     success: function() {} 
    }) 
});