我创建了一个包含两个表单的 php 页面，但我希望两个表单都只有一个提交按钮。表格有ids 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()"/>
你有几个问题
input type=image 是一个提交按钮，所以你试图从一个不存在的表单提交一些东西，可能是你所在的页面
当您提交form1时，它会替换当前页面，如果您还设法提交form2，则很可能会干扰form1的提交
以下是您可以尝试的内容（纯 JavaScript）：
<script language="javascript">
function submitForms() {
document.getElementById("firstform").submit();
document.getElementById("secondform").submit();
}
</script>
<form id="firstform" target="iframe1">
</form><iframe name="iframe1" style="display:none"></iframe>
<form id="secondform" target="iframe2">
</form><iframe name="iframe1" style="display:none"></iframe>
<button typ"button" onclick="submitForms()"><img src="images/order-button.png" "/></button>
或者 AJAX 一次一个表单（假设 jQuery 已加载）
$(document).ready(function() {
$("#subbut").click(function(e) {
e.preventDefault(); // or make the button type=button
$.post($("#firstform").attr("action"), $("#firstform").serialize(), function() {
$.post($("#secondform").attr("action"), $("#secondform").serialize(),
function() {
alert('Both forms submitted');
});
});
});
});
更新：如果您希望将两个表单的内容提交给一个操作，只需添加序列化：
$(document).ready(function() {
$("#subbut").click(function(e) {
e.preventDefault(); // or make the button type=button
$.post($("#firstform").attr("action"), $("#firstform").serialize() + $("#secondform").serialize(), function() {
alert('Both forms submitted');
});
});
});
PS：演示中的PHP只是在回显您发布的内容。在服务器上不需要特殊操作。
这是演示的jsfiddle。
HTML
<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" />
JavaScript
$(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);
}
});
我用它来解决类似的问题。我想创建一个页面来查询多个站点并并排查看它们的结果：
WordLookup.html（主/主页/框架入口点）：
<html>
<head>
<title>Word Lookup</title>
</head>
<frameset cols="33%,34%,33%">
<frame src="" name="DIC">
<frameset rows="21,*">
<frame src="frame.html" name="PRF">
<frame src="" name="MW">
</frameset>
<frame src="" name="TFD">
</frameset>
</html>然后是frame.html（javascript方法）：
<html>
<head>
<style>
body { margin: 0; background-color: #AAAAAA; }
table, td { padding: 0; border-collapse: collapse; margin-left: auto; margin-right: auto; }
form { padding: 0; margin: 0; }
</style>
<script>
function submitForms(){
var x = document.getElementById("search3").value;
document.getElementById("fr1").setAttribute("value", x);
document.getElementById("DIC").submit();
document.getElementById("fr2").setAttribute("value", x);
document.getElementById("MW").submit();
document.getElementById("fr3").setAttribute("value", x);
document.getElementById("TFD").submit();
document.getElementById("search3").value = "";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input id="search3" type="text" placeholder="3x Search" onclick="value=''" onkeydown="if (event.keyCode == 13)
{submitForms()}" autofocus="1">
</td>
<td>
<form action="http://www.dictionary.com/dic" target="DIC" id="DIC">
<input id="fr1" name="q" type="hidden" placeholder="Dictionary" onclick="value=''">
</form>
</td>
<td>
<form action="https://www.merriam-webster.com/dictionary" target="MW" id="MW">
<input id="fr2" name="s" type="hidden" placeholder="Merriam-Webster" onclick="value=''">
</form>
</td>
<td>
<form action="//www.thefreedictionary.com/_/search.aspx" target="TFD" id="TFD">
<input id="fr3" name="word" type="hidden" placeholder="TheFreeDictionary" onclick="value=''">
</form>
</td>
</tr>
</table>
</body>
</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()">