如何使用单个提交按钮在一个页面中提交两个表单
How to submit 2 forms in one page with a single submit button
我已经创建了一个包含两个表单的php页面，但我希望两个表单都只有一个提交按钮。形式具有CCD_ 1的CCD_；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()"/>
您有几个问题
-
inputtype=image是一个提交按钮，所以你试图从一个不存在的表单提交一些东西，很可能是你在上的同一页面
-
当你提交表单1时，它会替换当前页面，如果你也设法提交表单2，它很可能会干扰表单1 的提交
以下是您可以尝试的内容（纯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');
});
});
});
附言：演示中的PHP只是在回应你发布的内容。服务器上不需要执行任何特殊操作。
- 将第一个表单上的"target"属性设置为"_blank"
- 将第一个表单上的"action"属性设置为"#close"（将"close"替换为所需内容
- 在页面上设置一个脚本，检查document.location.hash是否为"close"（如果是window.close（）
下面是要演示的jsfiddle。
http://jsfiddle.net/TqhPr/18/
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（main/home/frame入口点）:
<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()">
相关文章：
- 在servlet中提交两个表单
- 我如何让我的脚本连续提交两个表单
- 只需一个按钮即可在页面上提交两个表单
- 我怎么能只提交两个表单元素
- j查询提交两个按钮
- 一次提交两个 HTML 表单，一个在当前窗口中，一个在新窗口中
- 如何使用一个带有 rails 和 javascript 的提交按钮提交两个表单
- 提交两个带有两个提交按钮的jQuery ajax表单
- 在一个按钮中提交两个表单
- 如何使用单个提交按钮在一个页面中提交两个表单
- 用一个提交按钮提交两个表单
- 使用javascript提交两个表单，但失败
- 是否有可能通过一个按钮提交两个表单，然后两个表单执行两个不同的操作
- 用一个按钮提交两个表单
- HTML表单似乎提交*两个* POST和GET
- 通过一个提交按钮提交两个表单的值
- 用一个提交按钮(JSON)提交两个表单
- 在rails中，用一个按钮提交两个不同的表单
- 使用外部Submit按钮提交两个不同的表单不能正常工作
- 两个ng在一个html页面中提交两个表单上的验证事件
