1

我正在处理预订页面表格。我想要一个客户填写信息的表格，底部有两个提交按钮：一个保留他们的预订 72 小时，另一个允许他们现在预订并继续结帐页面。第一个按钮应该通过电子邮件将数据发送给我，然后将用户重定向到静态 html 页面。第二个按钮也应该通过电子邮件将数据发送给我，然后将用户重定向到结帐页面。

首先，以这种方式有两个提交按钮是否可能？我看过关于有同意/不同意按钮的帖子，其中不同意按钮或多或少地取消了表单，同意按钮传递数据。我需要两个按钮来传递数据，但有不同的发布操作。

其次，我的表单中插入了一个免费的验证码；我厌倦了在我的电子邮件收件箱中收到机器人表单返回。我的验证码与 1 个提交按钮一起工作得很好。但是我完全不知道如何用两个提交按钮来暗示验证码。

这是我的代码，带有验证码和一个工作提交按钮（另一个按钮尚未“连接”并工作）：

<h2>Traveler Information</h2>
<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">
   <input type="hidden" id="skip_WhereToSend" name="skip_WhereToSend" value="my@email.com" />
   <input type="hidden" id="skip_Subject" name="skip_Subject" value="Reservation" />
   <input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="confirm.shtml" />
   <input type="hidden" id="skip_SnapHostID" name="skip_SnapHostID" value="xxx" />

<!-- form start -->
   <table width="558" border="0" cellpadding="2" cellspacing="0">
      <tr>
         <td width="214" align="right"># of Travelers</td>
         <td width="344">
            <select name="travelers" id="travelers">
              <option value="1" selected="selected">1</option>
              <option value="2">2</option>
            </select>
         </td>
      </tr>

      <tr>
         <td align="right">Room type</td>
         <td valign="top">
            <select name="room" id="room">
               <option value="" selected="selected">Select...</option>
               <option value="single">Single (1 bed)</option>
               <option value="double">Double (2 beds)</option>
               <option value="doublePlus">Superior Double (2 beds)</option>
            </select>
         </td>
      </tr>
   </table>
<!-- form end -->

<!-- captcha start -->
<table border="0" align="center" cellpadding="2" cellspacing="0" style="background-color:#b9558b;">
   <tr valign="bottom">
      <td style="padding: 0 4px 8px 8px;">
         <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');" style="font-size:11px;color: #000;">reload image</a><br />
         <a href="http://www.SnapHost.com"><img id="CaptchaImage" alt="Captcha Code" style="border-width:0px;" title="This Captcha image is intended to prevent spam. The Captcha code is generated by an online form processor. To submit this form, enter the code into the text field. For more information click on the Captcha image." src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=PR64FH7HK8F7" /></a>
      </td>

      <td style="padding: 0 8px 8px 4px;">
         <span style="color: #fff;"><i>Enter security code:</i></span><br />
         <input id="skip_CaptchaCode" name="skip_CaptchaCode" type="text" style="width:130px; height:64px; font-size:38px;" maxlength="6" />
      </td>
   </tr>

   <tr>
      <td colspan="2" align="center" style="background-color: #fff;">
         <a href="http://www.SnapHost.com" style="text-decoration:none; font-size:11px; font-family:Verdana, Arial, Helvetica; color:#000099;">This web form is protected from SPAM by <span style="text-decoration:underline;">SnapHost.com</span></a></td>
   </tr>
</table>

<script type="text/javascript">
function ReloadCaptchaImage(captchaImageId) 
{
   var obj = document.getElementById(captchaImageId);
   var src = obj.src;
   var date = new Date();
   var pos = src.indexOf('&rad=');

   if (pos >= 0) 
   { 
      src = src.substr(0, pos); 
   }

   obj.src = src + '&rad=' + date.getTime();
   return false; }
</script>

<!-- end captcha -->
<!-- start submit buttons -->
<table width="558" border="0" cellspacing="0" cellpadding="2">
   <tr>
      <td width="55%" align="right" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
         <input type="submit" name="bookMP-nov" value="Hold my reservation" class="submit" />
      </td>

      <td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
         <input type="submit" name="bookMP-nov" value="Book Now!" class="submit" />
      </td>
   </tr>
</table>
<!-- end submit buttons -->

根据他们的网站，验证码可以在同一页面上多次使用。我真的很喜欢 SnapHost.com 上使用的图像，我的许多客户年龄较大，这些是我遇到的最容易阅读的图像，所以我希望我可以继续使用 SnapHost 并仍然完成我的双重提交按钮需要。

如果有人对 (A) 是否可行和 (B) 从哪里开始编写可以协同工作的双重提交按钮/验证码有任何想法，我将非常感谢您的帮助！我不确定我是否需要 php（我一无所知）或 javascript 或 jQuery（我知道一点）或其他东西。谢谢！！

更新

我尝试了这段代码，虽然它重定向到正确的页面，但验证码没有验证，并且我的表单结果没有被发回给我。让我的希望有那么一刻，却又坠落到地球上！

<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='mp-NOVconfirm.shtml'; e.submit();" value="Hold my reservation" class="submit"></td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.action='../../index.shtml'; e.submit();" value="Book Now!" class="submit">

我也删除了这个

input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="http://www.happywivestravel.com/tours/machupicchu/mp-NOVconfirm.shtml"

表单顶部的代码，认为它会被输入标签中的 onClick 函数替换，但显然这不是这里的答案。

我希望有一个很好的简单修复，但事实并非如此。有其他想法的人吗？

4

1 回答 1

0

更新：再次检查您的代码、问题和答案我想出了这个：

Javascript：

<head>
<script type='text/javascript' >
   function validateReservation()
   {
     //You can validate your captcha here
     document.forms['mpNOV'].submit(); //this submits the form
   }

   function validateBooking()
   {
     //You can validate your captcha here
     document.forms['mpNOV'].submit(); //this submits the form
   }
</script>
</head>

这部分代码在表单所在的页面上，我不习惯使用验证码，所以我希望你能自己弄清楚验证。

原始代码：

<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" id="mpNOV">

改变：

<form action="http://www.SnapHost.com/captcha/send.aspx" method="post" name="mpNOV" id="mpNOV">

我为您的<form>元素添加了一个名称，以便使用document.forms. 此外，我注意到您在<form>SnapHost.com 中的操作。这意味着您的网站将被重定向到 SnapHost.com，并且您应该使用$_POST那里获取信息。由于这可能不是您的网站，您应该找出另一种在您的网站上使用 SnapHost 图像而不重定向到 SnapHost.com 的方法

如果这是您的网站，那么您可以使用此 PHP 代码来获取填写表格的数据：

 <head>
       <?php
         if($_SERVER['REQUEST_METHOD'] === 'POST') //This if statement checks wether there's been a $_POST request...
         {
            if(isset($_POST['Reservation']) //Is the Reservation button clicked?
            {
               //You can get your data here using $_POST
            }

            if(isset($_POST['Booking']) //Is the Booking button clicked?
            {
               //You can get your data here using $_POST
            }
         }
       ?>
 </head>

该isset语句检查一个变量，或者在这种情况下，一个按钮已被“设置”。因此，如果您单击“预订”按钮，则该if语句会看到“预订”按钮已设置。

代码的 PHP 部分进入<head>您<form action>重定向到的页面。

HTML：

<td>
    <input type="button" onClick="validateReservation();" value="Hold my reservation" class="submit" name="Reservation" />
</td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
    <input type="button" onclick="validateBooking();" value="Book Now!" class="submit" name="Book />
</td>

请注意，我为上面的提交按钮添加了一个名称，还请注意，您应该始终使用标签关闭<input>元素。/>我相信这是 W3C 标准。另外，到目前为止，我已经阅读了提交按钮不能具有单击功能，但对此我不太确定。

如果您在使用 PHP 和 $_POST 方法获取数据方面需要任何帮助，请看这里：这里。

请注意，stackoverflow.com 不是为您编写完整的代码，首先搜索网络和使用谷歌，如果您在此之后无法弄清楚，请在这里询问。

我希望这可以帮助你。

如果您有任何问题随时问！

于 2013-03-27T12:29:36.227 回答