用一个提交button提交多个表单
我有下面的代码，基本上是执行两个操作。 第一个是提交我的表单数据到谷歌电子表格和其他操作是提交我的第二个表单文本框值数据到另一个页面文本框的值。 如何做到这一点？
<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; } } 从上面你可以看到，这是第一页，在第二页中，我指的是第二种forms的Sankranthi_Reserv2.asp。 我想通过那里的文本框的值，所以问题是第一种forms是提交到谷歌文档和存储数据，但第二种forms需要通过手机号码文本框的值到下一页的文本框的值，但只有一个SUBMITbutton。
提交两个表单，你将不得不使用Ajax。 在使用form.submit（）之后，页面将会加载该表单的动作URL。 所以你将不得不这样做asynchronous。
因此，您可以asynchronous发送这两个请求，或者asynchronous发送一个请求，并在成功提交第二个表单之后。
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 }
你可以绑定这个submitTwoForms()函数在你的那个提交button上。 运用
$('#form1').submit(function() { submitTwoForms(); return false; });
但是，如果你不想这样做，你可以使用JQuery表单插件来使用Ajax提交表单。
像这样的东西可以工作：
$('#form1_submit_button').click(function(){ $('form').each(function(){ $(this).submit(); }); });
替代scheme：
$('#form1_submit_button').click(function(){ $('#form1 #form2 #form3').submit(); });
我发现的最简单的方法就是这样的
<form method='post' action='whatever?whatever1=blah&whatever2=blah'> <?php header ("Location: http://example.com/whatever.html"); ?>
这将执行表单的操作（不会在浏览器中显示），然后redirect到标题的页面。
