Question

我整个上午都在寻找这个，但没有找到任何可以帮助我的事情。我无法通过手册解决这个问题......我从来没有真正写过任何jQuery或javaScript，所以请保持温和。

当用户离开输入字段时，我能够弄清楚如何更新数据库。 :)但我也想发送隐藏的输入字段。

这是我的表格＆amp;脚本（表单元素与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

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

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

jQuery AJAX还在表单更改时发送隐藏字段

1 个答案: