Javascript 用一个按钮提交两份表格

我有两个HTML表单，一个是使用PHP在进入数据库时提交数据，另一个是将用户引导到paypal支付页面，我的问题是用户必须提交这两个表单，当然我不希望他们这样做。两个表单是否都可以使用一个提交按钮

<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）

您应该能够使用Javascript实现这一点：

<input type="button" value="Click Me!" onclick="submitForms()" />

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(f.elements[i].name + "=" + 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();

<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>

如果您的表单没有ID但有名称：

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}

<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>

---

如果您有一个常规的submit按钮，您可以向其添加一个onclick事件，该事件执行以下操作：

document.getElementById('otherForm').submit();

<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>

---

您可以使用AJAX提交第一个表单，否则一个表单的提交将阻止另一个表单的提交

表单提交会导致页面导航到表单的

操作。因此，您不能以传统方式同时提交这两个表单。如果您试图通过依次对每个表单调用
form.submit（）
来使用JavaScript执行此操作，则除了上次提交之外，每个请求都将被中止。因此，您需要通过JavaScript异步提交第一个表单：

<input type="button" value="Click Me!" onclick="submitForms()" />

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(f.elements[i].name + "=" + 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();

<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>

var f=document.forms.updateDB；
var postData=[]；
对于（var i=0；i
在Chrome和IE9中（我猜所有其他浏览器也是如此），只有后者会生成套接字连接，第一个会被丢弃。（浏览器会检测到这一点，因为这两个请求都是在上述代码中的一个JavaScript“时间片”内发送的，并且会丢弃除最后一个请求之外的所有请求。）

<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>

如果您让某个事件回调函数执行第二次提交（但在收到回复之前），则第一个请求的套接字将被取消。这绝对不值得推荐，因为在这种情况下，服务器可能已经处理了您的第一个请求，但您永远无法确定

<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>

我建议您使用/生成一个可以在服务器端进行交易的请求。
如果您想用一个按钮提交两个表单，您需要执行以下操作：

<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>

1-使用setTimeout（）

<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>

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>


函数myFunction（）{
setTimeout（函数（）{document.getElementById（“form1”）.submit（）；}，3000）；
setTimeout（函数（）{document.getElementById（“form2”）.submit（）；}，6000）；
}

javascript不会同时提交两个表单。我们提交两份带有一个按钮的表格，不是同时提交，而是在第二次提交后提交

<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>

编辑：当我们使用此代码时，浏览器不允许弹出窗口。

如果你像我一样在软件中使用此代码，只需将浏览器设置为“显示弹出窗口”，但如果你在设计网站时使用它，浏览器是一个障碍，代码无法运行。
当前选择的最佳答案太模糊，不可靠

<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>

我觉得这是一种相当安全的方法：

<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：使用jQuery编写更简单）

<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>

在不更改页面的情况下发布第一个表单，等待流程完成。然后张贴第二张表格。
第二篇文章将更改页面，但是您可能希望第二个表单也有一些类似的代码，获得第二个延迟对象（post_form2？）

<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>

不过，我没有测试代码。
这与时间有关吗？在提交之间设置一个短时间的超时是否可以解决这个问题？请原谅我的编辑，但我想收回我的否决票。我不确定这个请求会发生什么。浏览器肯定会中止该请求，但它仍可能一直发送到服务器。我试着用你的技术调试我的本地服务器，而且两个页面都被调用了，所以也许你的方法很好用。这是完全错误的（至少在Chrome和IE9上是如此）！请看下面我的答案。像支付网站吗？您好，我正在关注这个问题，它只提交javascript函数中的最后一个表单。你知道这是什么错误吗？回答得好，但根据具体情况和提交表单的方式，提交第一个表单可能会阻止提交第二个表单（例如，使用一个表单上的提交事件调用另一个表单上的
submit（）
将仅在Firefox中提交第一个表单）。在xhr对象完成之前，不应提交第二个表单。等待不会通知第一个提交是否成功（取决于第二个表单可能需要阻止提交的工作流），也不会保证两个请求的顺序处理（例如，如果PayPal交易失败，我是否应该将交易存储在数据库中？）。看看我写的备选答案；我试图对工作流程和结果提供更多的控制。使用承诺或延迟对象也是一个有价值的备选方案。为什么要投否决票？如果我写错了什么，最好发表评论。为什么要同时使用
e1.preventDefault（）；
和
e1.stopPropagation（）
。我想他们中的任何一个都足够了。仅供参考，我没有否决投票。只是我到了这个页面，有一些疑问。@dev_khan他们提供了不同的功能，所以，不，不是他们中的任何一个都足够。
preventDefault
是肯定需要的，以防止默认提交并获得将发生的事情的所有权与该事件相关。
stopPropagation
则取决于用例，以防事件不应从外部元素捕获（不记得了，但可能是去年我在动态编码时为了安全而将其放置的）
<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>