使用一个提交按钮提交多个表单答案

【问题标题】：Submit multiple forms with one submit button使用一个提交按钮提交多个表单
【发布时间】：2012-01-23 16:47:13
【问题描述】：

我有以下代码，基本上是执行两个操作。第一个是将我的表单数据提交到谷歌电子表格，另一个操作是将我的第二个表单文本框值数据提交到另一个页面文本框值。如何做到这一点？

<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 &ndash; 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">&nbsp;</th>
    <th width="109" rowspan="5" valign="top" class="YJCRED" scope="col"><div align="left"><font size="2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;* 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">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</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>&nbsp;</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>&nbsp;
      </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>&nbsp;</p></td>
  </tr>
  <p>&nbsp;</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;
}
}

从上面可以看出，这是第一页，在第二页中，我指的是第二种形式的 Sankranthi_Reserv2.asp。我想在那里传递文本框值，所以问题是第一个表单正在提交到谷歌文档并存储数据，但第二个表单需要将手机号码文本框值传递给下一页文本框值，但只有一个提交按钮。

【问题讨论】：

您能通过删除不相关的细节来简化您的示例代码吗？这个很难理解。
对不起，你的代码更短，但仅供参考，除了我提到的关于两个表单的一个提交按钮和第二个表单将值发送到另一个页面而第一个表单发送的问题之外，一切工作正常谷歌电子表格的文本框值..tks
我仍然看到很多不相关的信息。你能把它缩短 10-15 行吗？

标签： javascript jquery html

【解决方案1】：

要提交两个表单，您必须使用 Ajax。使用 form.submit() 页面将加载该表单的操作 URL。所以你必须异步执行。

因此您可以异步发送两个请求，也可以异步发送一个请求并在成功后提交第二个表单。

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() 函数。使用

$('#form1').submit(function() {
    submitTwoForms();
    return false;
});

但是，如果您不想这样做，您可以使用Jquery form plugin 使用 Ajax 提交表单。

【讨论】：

我建议使用“event.preventDefault();”超过“返回假；”。但没有关于它正常工作的争论:-)
Pradeep 我想知道这一行要更改“ {”form1 Data with name as key and value “};”到这个权利“document.getobjectbyname（“form1”）......？但我不确定你是否在第一篇文章中查看过我的代码，因为我的两个表单使用不同的方法，一个是 POST，另一个是 LINK。所以第二个表单，因为它使用 LINK 方法，所以它将在 html 链接中发送数据（我知道它已经暴露了它是好的）所以我不确定用什么替换你的代码行..请看看我的代码以上并进一步建议。Tks
@JackyBoi 我已将该行用作占位符。因为，您必须编写代码来创建该变量（如果有两个输入，则每个输入的每个名称都是key，它们的值将是对应键的值）。对于许多变量来说，使用插件会很乏味。但在您的情况下，您可以直接将该对象创建为{ inputname : "value"}，方法是将输入名称及其值放在document.getELementByID
好吧，pradeep，我现在在上班，我到家后会通知你，但我仍然对如何激活此功能有疑问？就像在提交按钮 onclick 事件处理程序中一样，我可以放置这个函数并且它可以工作？
是的，您可以使用 jquery 的 .submit() 函数 see doc 绑定该函数

【解决方案2】：

这样的事情会起作用：

$('#form1_submit_button').click(function(){
    $('form').each(function(){
        $(this).submit();
    });
});

替代方案：

$('#form1_submit_button').click(function(){
    $('#form1 #form2 #form3').submit();
});

【讨论】：

请看下面的最新评论应该与此评论同时出现。我对这两种形式都使用了两种不同的方法

【解决方案3】：

我发现的最简单的方法是这样的

<form method='post' action='whatever?whatever1=blah&whatever2=blah'>
<?php
header ("Location: http://example.com/whatever.html");
?>

这将执行表单的操作（不会在浏览器中显示），然后重定向到页眉的页面。

【讨论】：