用一个按钮提交两个表单
Submit two forms with one button
我有两个HTML表单,一个在使用PHP进入数据库时提交数据,另一个将用户引导到paypal支付页面,我的问题是用户必须提交这两个表单,当然我不希望他们必须这样做。是否有办法为两个表单使用一个提交按钮?
(欢迎Javascript)
你应该可以用JavaScript做到这一点:
<input type="button" value="Click Me!" onclick="submitForms()" />
如果你的表单有id:
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
如果您的表单没有id但有名称:
submitForms = function(){
document.forms["form1"].submit();
document.forms["form2"].submit();
}
表单提交导致页面导航到表单的action
。因此,您不能以传统方式同时提交这两种表单。如果您尝试用JavaScript在每个表单上连续调用form.submit()
,那么除了最后一次提交之外,每个请求都将被中止。因此,您需要通过JavaScript异步提交第一个表单:
var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
postData.push(encodeURIComponent(f.elements[i].name) + "=" +
encodeURIComponent(f.elements[i].value));
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "mypage.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(postData.join("&"));
document.forms.payPal.submit();
2023
更新原来的答案仍然工作得很好,但这里是使用fetch()
和现代语法的更新:
function submitBothForms() {
const { updateDB, payPal } = document.forms;
fetch(updateDB.action, {
method: updateDB.method,
headers: { "content-type": updateDB.enctype },
body: new FormData(updateDB),
});
payPal.submit();
}
请注意,虽然通常您会await
对fetch
的调用,但我们在这里没有这样做,因为由于您希望同时提交两个表单,因此您必须不关心updateDB表单是否成功。所以,延迟提交payPal表单是没有意义的。
如果这不是您想要的,您可以序列化调用,并一个接一个地提交表单,添加一些错误处理:
async function submitBothForms() {
const { updateDB, payPal } = document.forms;
const res = await fetch(updateDB.action, {
method: updateDB.method,
headers: { "content-type": updateDB.enctype },
body: new FormData(updateDB),
});
if (!res.ok) {
const err = new Error(`DB Update Failed! Status: ${res.status}`);
const isJSON = res.headers.get("content-type") == "application/json";
err.body = await (isJSON ? res.json() : res.text());
throw err;
}
payPal.submit();
}
这样,如果第一个表单不成功,抛出一个错误,阻止第二个表单被提交。我将把处理错误和显示错误消息留给您。
您可以使用AJAX提交第一个表单,否则其中一个表单的提交将阻止另一个表单的提交。
在Chrome和IE9(我猜所有其他浏览器也是)只有后者会生成套接字连接,第一个将被丢弃。(浏览器会检测到这一点,因为两个请求都是在上面代码中的一个JavaScript"时间片"中发送的,并且丢弃除最后一个请求外的所有请求。)
如果你有一些事件回调做第二次提交(但在收到回复之前),第一个请求的套接字将被取消。这绝对是没有什么值得推荐的,因为在这种情况下,服务器可能已经处理了您的第一个请求,但您永远无法确定。
我建议您使用/生成一个可以在服务器端处理的请求。
当前选择的最佳答案太模糊而不可靠。
我觉得这是一种相当安全的方式:
(Javascript:使用jQuery编写更简单)
$('#form1').submit(doubleSubmit);
function doubleSubmit(e1) {
e1.preventDefault();
e1.stopPropagation();
var post_form1 = $.post($(this).action, $(this).serialize());
post_form1.done(function(result) {
// would be nice to show some feedback about the first result here
$('#form2').submit();
});
};
在不更改页面的情况下发布第一个表单,等待流程完成。然后发布第二张表格。第二篇文章将改变页面,但您可能希望对第二个表单也有一些类似的代码,获得第二个延迟对象(post_form2?)。
我没有测试代码,尽管。
如果你想用一个按钮提交两个表单,你需要这样做:
使用setTimeout()
2-允许显示弹出
<script>
function myFunction() {
setTimeout(function(){ document.getElementById("form1").submit();}, 3000);
setTimeout(function(){ document.getElementById("form2").submit();}, 6000);
}
</script>
<form target="_blank" id="form1">
<input type="text">
<input type="submit">
</form>
<form target="_blank" id="form2">
<input type="text">
<input type="submit">
</form>
javascript不会同时提交两个表单。我们不是同时提交两个带有一个按钮的表单,而是在几秒钟后提交。
edit: 当我们使用这段代码时,浏览器不允许弹出窗口。如果你把这个代码用在软件上比如我把浏览器设置为显示弹出窗口但是如果你把它用在设计网站上,浏览器就是一个障碍代码无法运行
如果你有一个普通的提交按钮,你可以给它添加一个onclick事件,做以下事情:
document.getElementById('otherForm').submit();
- 在servlet中提交两个表单
- 我如何让我的脚本连续提交两个表单
- 在一次点击中发布到两个表单 JavaScript
- 只需一个按钮即可在页面上提交两个表单
- HTML5两个表单将分别打印出来
- 使用jQuery组合两个表单输入值
- 两个表单,一个选择/下拉框-需要将选择值从一个表单复制到另一个表单
- 我怎么能只提交两个表单元素
- 收听在同一页面上使用两个表单提交事件
- 两个表单 - 一个提交按钮
- 如何使用一个带有 rails 和 javascript 的提交按钮提交两个表单
- Angularjs 两个表单用于同一个控制器
- Rails/General HTML:如何从两个表单提交内容
- 如何使用一个 JavaScript 函数管理两个表单
- 尝试在 Bootstrap 中将两个表单并排放置.任何想法如何
- 点击时事件会触发两个表单的提交
- 如果一个表单输入被禁用,那么两个表单输入是否可以具有相同的名称
- 验证两个表单并将其作为一个jquery提交
- 如何对两个表单使用公共输入
- 同一页面上的两个表单和两个脚本,第一个脚本将被调用而不考虑提交