我有以下代码,基本上它执行两个操作。第一个是将我的表单数据提交到谷歌电子表格,另一个操作是将我的第二个表单文本框值数据提交到另一个页面文本框值。这个怎么做?
<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 – 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"/>
<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 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> </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> </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"/>
</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。我想在那里传递文本框值,所以问题是第一种形式是提交给谷歌文档并存储数据,但第二种形式需要将手机号码文本框值传递给下一页文本框值,但只有一个提交按钮。
原文由 JackyBoi 发布,翻译遵循 CC BY-SA 4.0 许可协议
要提交两个表单,您将不得不使用 Ajax。在使用 form.submit() 之后,页面将加载该表单的操作 URL。所以你必须异步地做。
因此,您可以异步发送两个请求或异步发送一个请求并在成功后提交第二个表单。
您可以将此
submitTwoForms()
函数绑定到您的那个提交按钮上。使用但是,如果你不想做这一切,你可以使用 Jquery 表单插件 来使用 Ajax 提交表单。