如何使用一个提交按钮在ajax中提交多个表单？
现在，我正在使用多个ajax表单提交来分别提交每个表单，但是我敢肯定有一种更简便的方法可以一次提交所有表单，而且我不确定如何提交。
$('#submit').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer').serialize(),
success:function(data)
{
location.reload();
$('#add_answer')[0].reset();
}
});
});
$('#submit1').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer1').serialize(),
success:function(data)
{
location.reload();
}
});
});
$('#submit2').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer2').serialize(),
success:function(data)
{
location.reload();
}
});
});
$('#submit3').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer3').serialize(),
success:function(data)
{
location.reload();
}
});
});
$('#submit4').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer4').serialize(),
success:function(data)
{
location.reload();
}
});
});
$('#submit5').click(function(){
$.ajax({
url:"answer.php",
method:"POST",
data:$('#add_answer5').serialize(),
success:function(data)
{
location.reload();
}
});
});
});
我还有多种与以下形式相似的表格，只是值不同。
<form name="add_answer5" id="add_answer5">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field5">
<tr>
<label><?php echo $question ?></label>
<td><input type="text" name="answer[]" placeholder="Enter your Answer" value="<?php echo $answer; ?>" class="form-control name_list" /></td>
<input type="hidden" name="id[]" placeholder="<?php echo $id?>" value="<?php echo $id; ?>" class="form-control name_list" />
<input type="hidden" name="dg_no[]" placeholder="<?php echo $dg_no;?>" value="<?php echo $dg_no;?>" class="form-control name_list" />
<input type="hidden" name="code_no[]" placeholder="<?php echo $code_no;?>" value="<?php echo $code_no;?>" class="form-control name_list" />
<input type="hidden" name="question[]" placeholder="<?php echo $question;?>" value="<?php echo $question;?>" class="form-control name_list" />
</tr>
<?php }?>
</table>
<button type="button" name="add" id="add5" class="btn btn-success">Add More</button>
<input type="button" class="btn btn-info" id="submit5" value="Submit" />
</div>
</form>
那么我将如何一次提交所有表单？我一直在考虑将所有的ajax提交放入一个函数中，并在单击“提交”按钮时调用该函数，但我不确定这是否是正确的方法。
答案 0 :(得分：0)
作为我上面的注释（使用FormData对象）的意思的示例，我迅速将一个演示哈希在一起，以指示您如何实现所述目标。没有jQuery，只有普通的原始Javascript，但是如果需要，您可以轻松地（我确定）对其进行修改以使用jQuery。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
echo "process the request, send a response, live long & prosper!";
exit();
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>multiple forms: one submit</title>
<script>
const submitall=function(e){
const callback=function(r){
console.info( 'response: %o',r )
}
const ajax=function(url,data,callback){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.readyState==4 && this.status==200 )callback( xhr.response );
};
xhr.open( 'POST', url, true );
xhr.send( data )
};
/* add all data from each form to this object */
let fd=new FormData();
/* get references to all forms */
let oCol=document.querySelectorAll( 'form' );
/* process each form */
for( let n in oCol ){
if( oCol[ n ].nodeType==1 ){
let tmp={};
for( i in oCol[ n ].elements ){
if( typeof( oCol[n][i] )!='undefined' && oCol[n][i].nodeType==1 ){
tmp[ oCol[n][i].name ]=oCol[n][i].value;
}
}
fd.append( oCol[n].name, JSON.stringify( tmp ) );
}
}
ajax.call( this, location.href, fd, callback )
}
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('master').onclick=submitall;
});
</script>
</head>
<body>
<input type='button' id='master' value='Gather all & submit' />
<form name='add_answer1' id='add_answer1'>
<div class='table-responsive'>
<table class='table table-bordered' id='dynamic_field1'>
<tr>
<label>question 1</label>
<td>
<input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 1' class='form-control name_list' />
<input type='hidden' name='id[]' placeholder='id' value='id 1' class='form-control name_list' />
<input type='hidden' name='dg_no[]' placeholder='dg_no' value='dg_no 1' class='form-control name_list' />
<input type='hidden' name='code_no[]' placeholder='code_no' value='code_no 1' class='form-control name_list' />
<input type='hidden' name='question[]' placeholder='question' value='question 1' class='form-control name_list' />
</td>
</tr>
</table>
<button type='button' name='add' id='add1' class='btn btn-success'>Add More</button>
</div>
</form>
<form name='add_answer2' id='add_answer2'>
<div class='table-responsive'>
<table class='table table-bordered' id='dynamic_field2'>
<tr>
<label>question 2</label>
<td>
<input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 2' class='form-control name_list' />
<input type='hidden' name='id[]' placeholder='id 2' value='id 2' class='form-control name_list' />
<input type='hidden' name='dg_no[]' placeholder='dg_no 2' value='dg_no 2' class='form-control name_list' />
<input type='hidden' name='code_no[]' placeholder='code_no 2' value='code_no 2' class='form-control name_list' />
<input type='hidden' name='question[]' placeholder='question 2' value='question 2' class='form-control name_list' />
</td>
</tr>
</table>
<button type='button' name='add' id='add2' class='btn btn-success'>Add More</button>
</div>
</form>
<form name='add_answer3' id='add_answer3'>
<div class='table-responsive'>
<table class='table table-bordered' id='dynamic_field3'>
<tr>
<label>question 3</label>
<td>
<input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 3' class='form-control name_list' />
<input type='hidden' name='id[]' placeholder='id 3' value='id 3' class='form-control name_list' />
<input type='hidden' name='dg_no[]' placeholder='dg_no 3' value='dg_no 3' class='form-control name_list' />
<input type='hidden' name='code_no[]' placeholder='code_no 3' value='code_no 3' class='form-control name_list' />
<input type='hidden' name='question[]' placeholder='question 3' value='question 3' class='form-control name_list' />
</td>
</tr>
</table>
<button type='button' name='add' id='add3' class='btn btn-success'>Add More</button>
</div>
</form>
<form name='add_answer4' id='add_answer4'>
<div class='table-responsive'>
<table class='table table-bordered' id='dynamic_field4'>
<tr>
<label>question 4</label>
<td>
<input type='text' name='answer[]' placeholder='Enter your Answer' value='answer 4' class='form-control name_list' />
<input type='hidden' name='id[]' placeholder='id 4' value='id 4' class='form-control name_list' />
<input type='hidden' name='dg_no[]' placeholder='dg_no 4' value='dg_no 4' class='form-control name_list' />
<input type='hidden' name='code_no[]' placeholder='code_no 4' value='code_no 4' class='form-control name_list' />
<input type='hidden' name='question[]' placeholder='question 4' value='question 4' class='form-control name_list' />
</td>
</tr>
</table>
<button type='button' name='add' id='add4' class='btn btn-success'>Add More</button>
</div>
</form>
</body>
</html>