提交多个表单，只需一个提交按钮

Question

提交多个表单，只需一个提交按钮

12

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

<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';}"/>
    
    <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"/>
                    <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 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"/>
                    
            </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"/>
                    
            </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"/>
            </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。我想在那里传递文本框的值，所以问题是第一个表单正在提交到Google文档并存储数据，但第二个表单需要将手提电话号码文本框的值传递到下一页文本框的值，但只有一个提交按钮。

- JackyBoi

2

你能否简化示例代码，去除无关细节？这样很难理解。 - Sergio Tulentsev

抱歉，这里有一个更短的代码，但是请注意，除了我提到的一个提交按钮同时用于两个表单并且第二个表单将值发送到另一页之外，一切都正常工作。第一个表单将文本框的值发送到Google电子表格。谢谢。 - JackyBoi

1

我仍然看到很多不相关的信息。你能让它变得短一些吗？大约10-15行。 - Sergio Tulentsev

3个回答

9

要提交两个表单，您需要使用Ajax。因为使用form.submit()后，页面将加载该表单的action 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表单插件使用Ajax提交表单。

- Pradeep

我建议使用 "event.preventDefault();" 而不是 "return false;"。但是这并不影响它的正确性 :-) - Flater

Pradeep，我在想将这一行更改为“document.getobjectbyname("form1")...”，而不是“{"form1 Data with name as key and value "};"。但我不确定您是否查看了我的第一篇帖子中的代码，因为我的两个表单使用不同的方法，一个是POST，另一个是LINK。所以第二个表单使用LINK方法，它将在HTML链接中发送数据（我知道它是公开的，没关系），所以我不确定要用什么替换您的代码行，请查看上面的代码并进一步建议。谢谢。 - JackyBoi

1

@JackyBoi 我使用那行作为占位符。因为你将需要编写创建该变量的代码（如果有两个输入，则每个输入的名称都将是“key”，它们的值将是相应键的值）。对于许多变量，这将很繁琐，因此许多人使用插件。但在您的情况下，您可以直接通过放置输入名称及其值document.getELementByID来创建该对象 { inputname : "value"}。 - Pradeep

好的，Pradeep，我现在正在上班，一旦我回到家，我会更新您。但我仍然对如何激活此函数有疑问。例如在提交按钮的onClick事件处理程序中，我只需放置此函数，它就可以工作吗？ - JackyBoi

是的，您可以使用jQuery的.submit()函数参见文档来绑定该函数。 - Pradeep

显示剩余8条评论

-4

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

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

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

- Degar007

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gustav · Accepted Answer

可以这样做：

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

另一种选择：

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