用Javascript/ajax或jquery提交多个表单 [英] Submit more than one form in Javascript/ajax or jquery
问题描述
这是我要执行的操作，一页中有3个表单，我必须这样做，因为一个表单在模式对话框中打开，我希望在用户单击单个按钮时提交所有3个表单，我想要以表单提交
This is what I am trying to do I have 3 forms in one page, i need to have to because one form is open in modal dialog, I wish to submit all 3 forms when the user click in a single button, also I would like a ajax implementation of sucess en error function in the form submit
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();
$.post(
URL: test.php
firstFormData + secondFormData + thirdFormData
);
</script>
<form id="form1">
<input type="text" name="one"></input>
</form>
<form id="form2">
<input type="text" name="two"></input>
</form>
<form id="form3">
<input type="text" name="three"></input>
</form>
<button>submit here</button>
<?php
echo $_POST['one'];
echo $_POST['two'];
echo $_POST['three'];
?>
推荐答案
您还可以执行以下操作:
You can also just do the following:
var combinedFormData = $("#form1,#form2,#form3").serialize();
这会将所有三种形式序列化为一个查询字符串.只要确保输入名称不重叠即可.
This will serialize all three forms into one query string. Just make sure the input names don't overlap.
完整的实现应如下所示:
A complete implementation would look like this:
<?php
// PHP Code to return the HTML to be inserted in the #result div
// Just for demonstration purposes.
if (count($_POST) > 0) {
echo "<p>You successfully posted:</p><ul>";
foreach ($_POST as $key => $val) {
echo "<li>$key: $val</li>";
}
echo "</ul>";
exit;
}
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="form1">
<input type="text" name="one">
</form>
<form id="form2">
<input type="text" name="two">
</form>
<form id="form3">
<input type="text" name="three">
</form>
<button id="sendforms">Submit forms</button>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1,#form2,#form3").serialize();
$.post(
"test.php",
combinedFormData
).done(function(data) {
alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
alert("Error submitting forms!");
})
});
});
</script>
</body>
</html>
请注意，PHP代码仅用于说明和测试.您既不应像这样实现您的表单处理，也不应将其放在与表单相同的文件中.都是不好的风格:-)
Please note that the PHP code is just for illustration and testing. You should neither implement your form handling like this, nor put it in the same file like your form. It's just all bad style :-)
这是一个正常工作的jsFiddle: https://jsfiddle.net/kLa1pd6p/
Here is a working jsFiddle:https://jsfiddle.net/kLa1pd6p/
这篇关于用Javascript/ajax或jquery提交多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
