Question

您好，我正在尝试以JSON格式提交表单表格。我能够以JSON格式获取表单表数据。但是，我只希望为那些输入已更改的输入字段提交数据。

这是我的代码-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>

<form id="form" method="post" action="otherpage.html">
  <table>
    <thead>
      <tr>
        <th>Field 1</th>
        <th>Field 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="field1[]">id1</td>
        <td><input type="hidden" name="field2[]">dsda</td>
      </tr>
      <tr>
        <td><input type="text" name="field1[]">id2</td>
        <td><input type="hidden" name="field2[]">dsda</td>
      </tr>
    </tbody>
  </table>
  <button type="button" name="button" id="button">Submit</button>
</form>

在每个tr中也有一个隐藏字段，因此当我提交表单并仅填写Field1时，即第一个tr的ID。我只想提交该tr的数据，如果输入字段未更改，则跳过第二个tr的所有第二个输入框。

请帮助。

Answer 1

可能的策略可以是：

在dom准备就绪后，为每个输入设置一个数据属性及其初始值
在按钮上单击过滤器输入元素以仅获取修改的元素

$('#form input').each(function(idx, ele) {
    $(ele).data('initValue', ele.value); // save values at begin...
});

$('#button').on('click', function(e) {
    // get only the modified fields...
    var changedElements = $('#form input').filter(function(idx, ele) {
        return this.value != $(ele).data('initValue');
    });
    var fs = changedElements.serializeJSON();
    console.log(JSON.stringify(fs));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>

<form id="form" method="post" action="otherpage.html">
    <table>
        <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="text" name="field11[]">id1</td>
            <td><input type="hidden" name="field21[]">dsda</td>
        </tr>
        <tr>
            <td><input type="text" name="field12[]">id2</td>
            <td><input type="hidden" name="field22[]">dsda</td>
        </tr>
        </tbody>
    </table>
    <button type="button" name="button" id="button">Submit</button>
</form>

jQuery提交表中输入已更改的字段

1 个答案: