用一个提交按钮提交多个表单 [英] Submit multiple forms with one submit 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>
<！ - #include virtual =/ sts / include / header.asp - >
<！ - 在此标题YJC之后 - >
< table style =background-color：#FFC; width =950align =centerborder =0summary =VanaBhojnaluBooking_Table>
tr < p class =MsoNormalalign =centerstyle =text-align：center;>< strong>< span字体大小：16.0pt;颜色：＃76923C;> Karthika Masa Vanabhojanalu& - ndash;参与预订< / span>< / strong>< / p>
< tr>
< th width =37scope =col>& nbsp;< / th>
< th width =109rowspan =5valign =topclass =YJCREDscope =col>< div align =left>< font size = 2\" > &安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP;&安培; NBSP; & nbsp;& nbsp;& nbsp;& nbsp; *必填< / font>< / div>< / th>
< td width =68scope =col>< div align =right>< font size =2.5px>名称< / font>< span class = yj>< span class =yjcred> *< / span>< / span>< / div>< / td>
< th colspan =3scope =col>< label for =Name>< / label>
< div align =left>
< input name =entry.0.singleclass =requiredstyle =width：487px; height：25px; vertical-align：middle; type =textid =entry_0title =输入你的名字>
< / div>< / th>
< th width =223scope =col>& nbsp;< / th>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>< div align =right>< font size =2.5px>电话< / font>< span class =yj>< span class = yjcred> * LT; /跨度>< /跨度>< / DIV>< / TD>
< td width =107>< input name =entry.1.singleclass =requiredtitle =Handphone Number with out +65maxlength =8style =width ：100像素;高度：25像素; type =textonkeyup =copy_data（this）onKeyPress =return numbersonly（this，event）id =entry_1>< / td>
< td width =170>< div align =right>< font size =2.5px>电子邮件< / font>< span class =yj> < span class =yjcred1> *< / span>< / span>< / div>< / td>
< td width =206>< input name =entry.2.singletype =textstyle =width：190px; height：25px; id =requiredtitle =输入您的电子邮件地址class =required email>< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>< div align =right>< font size =2.5px>家庭电话< / td>< / div>< / td>
< td width =107>< input name =entry.1.singletitle =Handphone Number with out +65maxlength =8style =width：100px; height： 25像素; type =textonKeyPress =return numbersonly（this，event）id =entry_100>< / td>
< / tr>
< tr>
< td align =centercolspan =7>< p>& nbsp;
< / p>
< p>
< input type =submitname =submitonMouseOver =Window.status ='You can see anything'; return trueonMouseOut =window.status ='只有在正确的信息输入后才按下SUBMIT那么你已经完成'onClick =jQuery.Watermark.HideAll（）;值= 提交 >
< / p>
< p>& nbsp;< / p>< / td>
< / tr>
< p>& nbsp;< / p>
< tr>
< td colspan =25>< / td>
< / tr>
< / table>
< / form>
< form method =LinkAction =Sankranthi_Reserv2.asp>
< input disabled name =hp copymaxlength =8style =width：100px; height：25px; type =textid =copy_to>
< / form>
< p><！ - #include virtual =/ sts / include / footer.asp - >
< input type =hiddenname =pageNumbervalue =0>
< input type =hiddenname =backupCachevalue =>
< script type =text / javascript>
（function（）{
var divs = document.getElementById（'ss-form'）。
getElementsByTagName（'div'）;
var numDivs = divs .length;
for（var j = 0; j
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。想要在那里传递文本框的值，所以问题是第一种形式是提交给谷歌文档并存储数据，但第二种形式需要将handphone number文本框值传递给nextpage textbox val ue，但只有一个SUBMIT按钮。
解决方案要提交两个表单，您必须使用Ajax。在使用form.submit（）后，页面将加载该表单的动作URL。所以你将不得不这样做异步。所以你可以异步地发送这两个请求或发送一个请求异步，并在其成功后提交第二种形式。
函数submitTwoForms（）{
var dataObject = {form1名称为键和值的数据};
$ .ajax（{
url：test.html，
data：dataObject，
类型：GET，
success：function（）{
$（＃form2）。submit（）; //假定第二种形式的id是form2
}
}）;
返回false; //防止提交
}
你可以绑定这个 submitTwoForms （）函数在你的那个提交按钮上。使用
$（'＃form1'）。submit（function（）{
submitTwoForms（）;
返回false;
}）;
但是，如果你不想这么做，你可以使用 jquery表单插件使用Ajax提交表单。
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.
解决方案 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.
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
$('#form1').submit(function() {
submitTwoForms();
return false;
});
But, if you do not want to do all this, you can use Jquery form plugin to submit form using Ajax.
这篇关于用一个提交按钮提交多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆