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并提交表格

 $(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> 

您可以在name属性中使用索引，例如<input type="text" name="item[1]" />

Answer 2

您可以将“ changed”类添加到所需的更改元素上，并发送没有“ changed”类的元素的数据：

<form action="submit.php" method="get" id="myform">
  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>
<input type="submit" id="submit">
</form>

倾听变化：

$("input,select").on("change",function(){
   $(this).addClass("changed");
})

通过ajax调用处理数据，并通过返回false阻止表单提交，并将更改的类重置为空：

$("#myform").on("submit",function(){

//Collecting data from changed class:
var data;
$(".changed").each(function(){
data=data+$(this).attr("name")+":"+$(this).val()+",";
});

//just removing last comma:
data=data.substring(0, data.length - 1);

//Submit data:
$.ajax({
    ...
    data : { data },
    ...
    success: function(){ 
    //Removing changed class from all elements
    $(".changed").removeClass("changed");
    }
});

return false;
});

Answer 3

var data = {};
$(function(){
    $(document).on('change', 'input', function(){
    data[this.name] = this.value;
  });
});

您可以将更改事件添加到输入，并将更改后的值添加到数据对象，或将字段附加到表单数据中。 因此，数据对象仅包含更改后的值。

您可以使用formdata发送文件数据。 请参考此链接。

如何使用FormData进行Ajax文件上传