javascript - JQuery 如何在表单有一些数据数组时只提交更改的字段

Question

我有一个具有一对多关系的数据库结构。在 html 表单中，有类似的输入名称 'item[]' 或 'file[]' 使数据成为数组

<form action="submit.php" method="get">
  Name:<input type="text" name="name"/><br/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Select:<select name="select" value="1" original="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  </select>

</form>

我怎样才能只提交更改的字段，并在服务器端识别更改的项目？我尝试禁用输入，但它似乎不起作用。

另一个问题是，如果我用ajax提交表单，我该如何提交文件

Answer 1

您可以使用 jQuery 解决这个问题，并在每个更改的 input 上添加一个类
比你可以禁用所有 inputs没有类(class)并提交表格

$(document).ready(function() {
  $('input, select, textarea').on('change', function() {
    $(this).addClass('changed');
  });
  
  $('form').on('submit', function() {
    $('input:not(.changed), textarea:not(.changed)').prop('disabled', true);
    
    // alert and return just for showing
    alert($(this).serialize().replace('%5B', '[').replace('%5D', ']'));
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="submit.php" method="get">
  Name:<input type="text" name="name" /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Select:<select name="select" value="1" original="1">
  <option value="" selected="selected" disabled="disabled"></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  </select><br/><br/>
  <button type="submit">send</button>
</form>

您可以像这样在名称属性中使用索引 <input type="text" name="item[1]" />