Otá*_*eto 7 javascript php forms ajax jquery
这就是我想要做的我在一个页面中有3个表单,我需要因为一个表单在模态对话框中打开,我希望在用户单击一个按钮时提交所有3个表单,我也想表单提交中的sucess en error函数的ajax实现
<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'];
?>
您还可以执行以下操作：
var combinedFormData = $("#form1,#form2,#form3").serialize();
这会将所有三种形式序列化为一个查询字符串。只需确保输入名称不重叠即可。
完整的实现如下所示：
<?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 代码仅用于说明和测试。您既不应该像这样实现表单处理，也不应该将其放在与表单相同的文件中。这只是糟糕的风格:-)
这是一个工作的 jsFiddle： https: //jsfiddle.net/kLa1pd6p/
| 归档时间： |
|
| 查看次数： |
947 次 |
| 最近记录： |