使用jQuery serialize()和AJAX发送部分表单
使用jQuery serialize()和AJAX发送部分表单
提问于 2013-04-21 19:26:34
我正在尝试使用jQuery的serialize通过AJAX发送表单的一部分。该表单有16个文本字段。我有4个按钮。button0发送文本字段0,1,2,3，button1发送文本字段4,5,6,7等等，我该怎么做呢？
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Serialize</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'>
</form>
</body>
</html>jQuery：
$(document).ready(function(){
for(i=0;i<16;i++){
$('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>');
}
for(i=0;i<4;i++){
$('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>');
}
$('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>');
});回答 4
Stack Overflow用户
回答已采纳
发布于 2013-04-21 19:48:28
如果您真的想只使用一种表单，可以尝试像我在this fiddle中所做的那样。
为窗体创建子部件。
<form>
<div id="first">
<input name="tbox1" type="text">
<input name="tbox2" type="text">
<input name="tbox3" type="text">
<input id="button1" type="button" value="button1">
</div>
<div id="second">
<input name="tbox4" type="text">
<input name="tbox5" type="text">
<input name="tbox6" type="text">
<input id="button2" type="button" value="button2">
</div>
</form>然后只需选择零件的所有元素：
$(document).ready(function() {
$('#button1').on('click', function() {
alert($('#first input').serialize());
});
$('#button2').on('click', function() {
alert($('#second input').serialize());
});
});当然，如果您也有选择框，则必须将它们添加到选择器中。例如：
$('#second input, #second select').serialize()Stack Overflow用户
发布于 2013-04-21 19:45:16
例如，根据需要进行修改：
<form name="test">
<input type="textinput" name="first" value="test1" class="form2" /> <br/>
<select name="second" class="form1">
<option value="1">opt 1</option>
<option selected="selected" value="2">opt 2</option>
</select>
<input type="textinput" name="third" value="test1" class="form2" /> <br/>
</form>
<script>
(function() {
// get second form elements
var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize();
alert(options);
}())
</script>这将获得所有具有form2类的输入。
Stack Overflow用户
发布于 2018-06-03 03:17:10
一种更具语义和粒度的方法是使用自定义属性来选择不同的表单部分。更容易将表单元素重新分配给不同的按钮，而无需处理容器。
$('button[name="button1"]').click(function() {
data = $('[scope="part1"]').serialize();
console.log(data);
});
$('button[name="button2"]').click(function() {
data = $('[scope="part2"]').serialize();
console.log(data);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="text1" scope="part1" />
<input type="text" name="text2" scope="part1" />
<input type="text" name="text3" scope="part1" />
<input type="text" name="text4" scope="part1" />
<button type="button" name="button1">Button 1</button>
<input type="text" name="text5" scope="part2" />
<input type="text" name="text6" scope="part2" />
<input type="text" name="text7" scope="part2" />
<input type="text" name="text8" scope="part2" />
<button type="button" name="button2">Button 2</button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16130619
复制相关文章
相似问题