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() {} 
    }) 
});