jQuery AJAX还会在表单更改时发送隐藏字段 [英] jQuery AJAX also send hidden fields on form change

问题描述

整个上午，我一直在寻找，但没有找到任何可以帮助我的东西.我无法用手册解决这个问题……我从来没有真正写过任何jQuery或JavaScript，所以请保持柔和.

I've been searching for this all morning but didn't find anything that could help me. I couldn't figure this out with the manual... I've never really written any jQuery or javaScript so please be gentle.

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

I was able to figure out how to update the database when the user leaves the input field. :) But I also want to send the hidden input fields.

这是我的表格&脚本(表单元素与ID具有相同的NAME，因此在本示例中，我将其保留以保持可读性)

Here is my form & script (the form elements have the same NAME as ID so for this example I left them out to keep things readable)

<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提供的帮助，但是脚本似乎破坏了我的复选框.

-edit- I'm very thankful to the help I got from Axel, but the script seemed to break my checkboxes.

初始表单是由 onChange ="document.Form.submit()" 提交的，因此，在复选框未选中的情况下，我需要隐藏输入字段以设置值

The initial form was submit by onChange="document.Form.submit()" because of this I needed the hidden input fields before the checkboxes, to set the value in case the box was unchecked.

现在jQuery部分不起作用，因此我删除了隐藏字段并使用以下脚本.由于我是jQuery的新手，所以也许有更好的方法，但是它似乎可以正常工作.

Now with the jQuery part this didn't work, so I removed the hidden fields and use the following script. As I'm completely new at jQuery there is probably a better way, but it seems to work alright.

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

推荐答案

如果您只想提交更改的字段以及相关的(由每个name属性的结尾标识的)隐藏字段，则可以执行以下操作:

In case you want just submit your changed fields plus the related (identified by the ending of each name attribute) hidden ones, you can do something like this:

$('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为此提供了一个功能:序列化.您还可以使用本机方法 FormData 在最近的浏览器中可用:

In case you want to send complete form - jQuery has a function for this: serialize. You might also use the native method FormData which works in recent browsers:

// 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还会在表单更改时发送隐藏字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！