Javascript 如何使用一个提交按钮在一个页面中提交两个表单

我创建了一个包含两个表单的php页面，但我希望两个表单都只有一个提交按钮。表单具有

id

s

firstform

和

secondform

。我尝试过其他脚本，但它们实际上不起作用

下面是我的代码：

<script language="javascript">
submitForms = function(){
    document.getElementById("firstform").submit();
    document.getElementById("secondform").submit();
}

</script>

<input type="image" src="images/order-button.png" name="button" value="Submit" onclick="submitForms()"/>

submitForms=函数（）{
document.getElementById（“firstform”）.submit（）；
document.getElementById（“secondform”）.submit（）；
}

您有几个问题

input type=image是一个提交按钮，因此您试图从一个不存在的表单提交内容，很可能与您所在的页面相同

当您提交form1时，它将替换当前页面，如果您同时提交form2，则很可能会干扰form1的提交

以下是您可以尝试的内容（纯javascript）：

---

更新：如果希望将两个表单的内容提交到一个操作，只需添加序列号：

$（文档）.ready（函数（）{
$（“#subbut”）。单击（函数（e）{
e、 preventDefault（）；//或使按钮类型=按钮
$.post（$（“#firstform”）.attr（“action”），$（“#firstform”）.serialize（）+$（“#secondform”）.serialize（），function（）{
警报（“两份表格均已提交”）；
});
});
});

PS：演示中的PHP只是回显了您发布的内容。服务器上不需要特殊操作。

• 将第一个表单上的“target”属性设置为“\u blank”
• 将第一个表单上的“action”属性设置为“#close”（将“close”替换为所需内容）
• 在页面上有一个脚本，用于检查document.location.hash是否为“close”，如果是window.close（）

下面是要演示的JSFIDLE

HTML

---

此代码使用单个提交按钮成功发布了2个表单数据

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
    var arrDocForms = document.getElementsByTagName('form');
    var formCollector = document.createElement("form");
    with(formCollector)
    {
        method = "post";
        action = "test.php";
        name = "formCollector";
        id = "formCollector";
    }
    for(var ix = 0 ; ix < arrDocForms.length ; ix++) {
        appendFormVals2Form(arrDocForms[ix], formCollector);
    }
    document.body.appendChild(formCollector);
    formCollector.submit();
}

/* Function: add all elements from frmCollectFrom and append them to 
             frmCollector before returning frmCollector*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
    var frm = frmCollectFrom.elements;
    for(var ix = 0 ; ix < frm.length ; ix++)
        frmCollector.appendChild(frm[ix]);
    return frmCollector;
}
</SCRIPT>

<FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1">
    <INPUT TYPE="text" NAME="box1" size="20" >
</FORM>
FORM2:
<FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2">
    <INPUT TYPE="text" NAME="box2" size="20" >
</FORM>

<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()">

/*将文档中的所有表格收集到一个文件夹中并将其发布*/
函数submitAllDocumentForms（）{
var arrDocForms=document.getElementsByTagName（'form'）；
var formCollector=document.createElement（“表单”）；
带（formCollector）
{
方法=“post”；
action=“test.php”；
name=“formCollector”；
id=“formCollector”；
}
对于（var ix=0；ix

我用它解决了一个类似的问题。我想创建一个页面来查询多个站点并并排查看它们的结果：

WordLookup.html（主/主/框架入口点）：

查词

您是否尝试过从

提交表单中返回false

？@DanielA.White不，我没有尝试，但是在哪里放置返回false呢？提交会将您转发到操作URL，除非它发回一些不打算在浏览器中显示的内容（您可以下载的文件）。您可以使用javascript发送包含每个表单数据的ajax post消息。您所说的“分别提交”是什么意思？请在您的评论中详细说明。当我单击11按钮时，按钮22上的值为1，但当我单击“提交两个表单”时这两种方法都不管用。当我把submit按钮放在第一个表单中时，它只起作用；当我把submit按钮放在第二个表单中时，它只起作用；但当我把submit按钮放在两个表单的外侧时，它就不起作用了。这不是你要求的。你要求提交两个表单，而不是如何将两个表单合并成一个表单提交。请看我的Updatempungjan是的，您的演示也很完美&非常感谢：）

<form id="f1" name="f1" target="_blank" method="POST" action="#close">
    <input type="hidden" value="1" />
    <input type="submit" id="s1" value="11" />
</form>
<hr/>
<form id="f2" name="f2" method="POST" action="#second_form">
    <input type="hidden" value="2" />
    <input type="submit" id="s2" value="22" />
</form>
<hr/>
<input type="button" id="both" value="Submit Both Forms" />

$(document).ready(function() {
    $("#both").click(function() {
        document.getElementById("f1").submit();
        document.getElementById("f2").submit();
    });
    if(document.location.hash == "#close") {
        alert("closing the window caused by posting the first form");
        window.close();
    }
    if(document.location.hash) {
        alert(document.location.hash);
    }
});

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
    var arrDocForms = document.getElementsByTagName('form');
    var formCollector = document.createElement("form");
    with(formCollector)
    {
        method = "post";
        action = "test.php";
        name = "formCollector";
        id = "formCollector";
    }
    for(var ix = 0 ; ix < arrDocForms.length ; ix++) {
        appendFormVals2Form(arrDocForms[ix], formCollector);
    }
    document.body.appendChild(formCollector);
    formCollector.submit();
}

/* Function: add all elements from frmCollectFrom and append them to 
             frmCollector before returning frmCollector*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
    var frm = frmCollectFrom.elements;
    for(var ix = 0 ; ix < frm.length ; ix++)
        frmCollector.appendChild(frm[ix]);
    return frmCollector;
}
</SCRIPT>

<FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1">
    <INPUT TYPE="text" NAME="box1" size="20" >
</FORM>
FORM2:
<FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2">
    <INPUT TYPE="text" NAME="box2" size="20" >
</FORM>

<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()">