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>

-编辑- 我非常感谢 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

如果您只想提交更改的字段以及相关的（由每个名称属性的结尾标识）隐藏的字段，您可以执行以下操作：

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