Javascript 使用一个提交按钮提交多个表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8563299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit multiple forms with one submit button
提问by HymanyBoi
I have the following code, basically it is performing two operations. First one being submitting my form data to the google spreadsheet and the other operation is submitting my second form textbox value data to another page textbox value. How to do this?
我有以下代码，基本上它正在执行两个操作。第一个是将我的表单数据提交到谷歌电子表格，另一个操作是将我的第二个表单文本框值数据提交到另一个页面文本框值。这该怎么做？
<script type="text/javascript">
<!--
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
//-->
</SCRIPT>
<style type="text/css">
<!--
-->
</style>
</head>
<body >
<script type="text/javascript">var submitted=false;</script>
<iframe name="response_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='Thanks.asp';}"></iframe> <form action="https://docs.google.com/spreadsheet/formResponse?formkey=dGtzZnBaYTh4Q1JfanlOUVZhZkVVUVE6MQ&ifq" method="post" target="response_iframe" id="commentForm" onSubmit="submitted=true;">
<!-- #include virtual="/sts/include/header.asp" -->
<!-- ABove this Header YJC -->
<table style="background-color: #FFC ;" width="950" align="center" border="0" summary="VanaBhojnaluBooking_Table">
<tr><td colspan="7"><p class="MsoNormal" align="center" style="text-align:center;"><strong><span style="line-height:115%; font-family:'Arial Rounded MT Bold','sans-serif'; font-size:16.0pt; color:#76923C; ">Karthika Masa Vanabhojanalu – Participation Booking</span></strong></p>
<p class="MsoNormal" align="center" style="text-align:center;"><strong><em><span style="line-height:115%; font-size:20.0pt; color:#7030A0; ">13<sup>th</sup> Nov 2011 - @ West Coast Park - Singapore</span></em></strong></p>
<p class="MsoNormal" align="center" style="text-align:center;"><strong><span style="color:#7030A0; ">Reserve your participation and avail </span><span style="color:red; "> <a target="_blank" href="/STS/programs/VB_2011_info.asp"> DISCOUNT </a></span><span style="color:#7030A0; "> on the ticket</span></strong></p></td> </tr>
<tr>
<th width="37" scope="col"> </th>
<th width="109" rowspan="5" valign="top" class="YJCRED" scope="col"><div align="left"><font size="2"> * Required</font></div></th>
<td width="68" scope="col"><div align="right"><font size="2.5px">Name</font><span class="yj"><span class="yjcred">*</span></span></div></td>
<th colspan="3" scope="col"><label for="Name"></label>
<div align="left">
<input name="entry.0.single" class="required" style="width:487px; height:25px; vertical-align:middle;" type="text" id="entry_0" title="Enter your name" >
</div></th>
<th width="223" scope="col"> </th>
</tr>
<tr>
<td> </td>
<td><div align="right"><font size="2.5px">Phone</font><span class="yj"><span class="yjcred">*</span></span></div></td>
<td width="107"><input name="entry.1.single" class="required" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onkeyup="copy_data(this)" onKeyPress="return numbersonly(this, event)" id="entry_1" ></td>
<td width="170"><div align="right"><font size="2.5px">Email</font><span class="yj"><span class="yjcred1">*</span></span></div></td>
<td width="206"><input name="entry.2.single" type="text" style="width:190px;height:25px;" id="required" title="Enter your email address" class="required email" ></td>
</tr>
<tr>
<td> </td>
<td><div align="right"><font size="2.5px">Home Phone</font></div></td>
<td width="107"><input name="entry.1.single" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onKeyPress="return numbersonly(this, event)" id="entry_100" ></td>
</tr>
<tr>
<td align="center" colspan="7"><p>
</p>
<p>
<input type="submit" name="submit" onMouseOver="Window.status='You can not see anything';return true" onMouseOut="window.status='Press SUBMIT only after proper inforatmion entering then you are Done'" onClick="jQuery.Watermark.HideAll();" value="Submit">
</p>
<p> </p></td>
</tr>
<p> </p>
<tr>
<td colspan="25"></td>
</tr>
</table>
</form>
<form method="Link" Action="Sankranthi_Reserv2.asp">
<input disabled name="copy of hp" maxlength="8" style="width:100px;height:25px;" type="text" id="copy_to" >
</form>
<p><!-- #include virtual="/sts/include/footer.asp" -->
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<script type="text/javascript">
(function() {
var divs = document.getElementById('ss-form').
getElementsByTagName('div');
var numDivs = divs.length;
for (var j = 0; j < numDivs; j++) {
if (divs[j].className == 'errorbox-bad') {
divs[j].lastChild.firstChild.lastChild.focus();
return;
}
}
for (var i = 0; i < numDivs; i++) {
var div = divs[i];
if (div.className == 'ss-form-entry' &&
div.firstChild &&
div.firstChild.className == 'ss-q-title') {
div.lastChild.focus();
return;
}
}
As you can see from above, this is the first page and in the second page where I was referring to Sankranthi_Reserv2.asp in the second form. I want to pass the textbox value over there, so the problem is the first form is submitting to the google docs and storing the data, but the second form need to pass the handphone number textbox value to the nextpage textbox value, but there is only one SUBMIT button.
从上面可以看出，这是第一页，在第二页中，我指的是第二种形式的 Sankranthi_Reserv2.asp。我想在那里传递文本框值，所以问题是第一个表单提交到谷歌文档并存储数据，但第二个表单需要将手机号码文本框值传递给下一页文本框值，但只有一个提交按钮。
采纳答案by Pradeep
For submitting two forms you will have to use Ajax. As after using form.submit() page will load action URL for that form. so you will have to do that asynchronously.
要提交两个表单，您必须使用 Ajax。使用 form.submit() 页面将加载该表单的操作 URL。所以你必须异步执行。
So you can send both request asynchronously or send one request asynchronously and after its success submit second form.
因此，您可以异步发送两个请求或异步发送一个请求，并在成功后提交第二个表单。
function submitTwoForms() {
var dataObject = {"form1 Data with name as key and value "};
$.ajax({
url: "test.html",
data : dataObject,
type : "GET",
success: function(){
$("#form2").submit(); //assuming id of second form is form2
}
});
return false; //to prevent submit
}
You can bind this submitTwoForms()function on your that one submit button. Using
你可以submitTwoForms()在你的那个提交按钮上绑定这个函数。使用
$('#form1').submit(function() {
submitTwoForms();
return false;
});
But, if you do not want to do all this, you can use Jquery form pluginto submit form using Ajax.
但是，如果你不想做这一切，你可以使用Jquery 表单插件使用 Ajax 提交表单。
回答by Gustav
Something like this would work:
像这样的事情会起作用：
$('#form1_submit_button').click(function(){
$('form').each(function(){
$(this).submit();
});
});
Alternative:
选择：
$('#form1_submit_button').click(function(){
$('#form1 #form2 #form3').submit();
});
回答by Degar007
the simplest way I have found is something like this
我发现的最简单的方法是这样的
<form method='post' action='whatever?whatever1=blah&whatever2=blah'>
<?php
header ("Location: http://example.com/whatever.html");
?>
This will do the action of the form (without showing it in your browser), then redirect to the page of the header.
这将执行表单的操作（不会在浏览器中显示它），然后重定向到标题页面。
