使用jQuery serialize（）和AJAX发送表单的一部分

我正在尝试使用jQuery的序列化通过AJAX发送一个表单的一部分。 表单有16个文本字段。 我有4个按钮。 button0发送文本字段0,1,2,3， button1发送文本字段4,5,6,7等等。我该怎么办？

HTML

jQuery的：

  $(document).ready(function(){ for(i=0;i<16;i++){ $('form').append('Campo de texto '+i+'
'); } for(i=0;i<4;i++){ $('form').append('
'); } $('form').append('
'); }); 

Answer 1

如果你真的想只留下一个表格，试试像我在这个小提琴中所做的那样。

为表单创建子部件。

然后只需选择部件的所有元素：

 $(document).ready(function() { $('#button1').on('click', function() { alert($('#first input').serialize()); }); $('#button2').on('click', function() { alert($('#second input').serialize()); }); }); 

当然，如果您还有选择框，则必须将它们添加到选择器中。 例如：

 $('#second input, #second select').serialize() 

Answer 2

尝试DEMO和CODE

例如，根据您的需要进行修改：

 
  
  opt 1 opt 2   
 
  

这将获得具有form2类的所有输入。

Answer 3

 var formData = $(form).find('#selectedOptions : input') . serialize(); $.post(url, formData) .done(function (data) { alert('hi'); }); where #selectedOptions is id of the element. 

Answer 4

更加语义和细化的方法是使用自定义属性来选择不同的表单部分。 使表单元素重新分配给不同的按钮更容易，而不会弄乱容器。

 $('button[name="button1"]').click(function() { data = $('[scope="part1"]').serialize(); console.log(data); }); $('button[name="button2"]').click(function() { data = $('[scope="part2"]').serialize(); console.log(data); }); 

  
     Button 1     Button 2