1 个表单 2 个带有验证码的提交按钮答案

【问题标题】：1 form 2 submit buttons with captcha1 个表单 2 个带有验证码的提交按钮
【发布时间】：2013-03-17 00:33:43
【问题描述】：

我正在处理预订页面表单。我想要一个表格，客户填写他们的信息，底部有两个提交按钮：一个保留 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 函数替换，但显然这不是这里的答案。

我希望有一个简单的解决方案，但事实并非如此。有其他想法的人吗？

【问题讨论】：

标签： php javascript forms submit captcha

【解决方案1】：

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

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 部分进入您的 <form action> 重定向到的页面的 <head>。

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 方法获取数据方面需要任何帮助，请看这里：Here。

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

希望对你有帮助。

如果您有任何问题，请随时提问！

【讨论】：

非常感谢您的帮助！我有几个关于代码的问题（对不起，我是个新手！）： php 代码去哪里了？在<head> 标签之间（应该用什么包装？）或在单独的 php 文档中或插入到我的按钮之前？另外，感谢您提供代码 cmets，但 //Your code goes here 是什么代码？那是重定向的隐藏输入类型还是其他？这适用于我的验证码吗？谢谢！！
我已经编辑了我的代码，我可以在//Your code goes here 上给你写完整的代码，但就像我在回答中所说的那样，我们不是来写完整的代码，我们是来帮助您朝着正确的方向前进。
太好了，哈门。我可以编写自己的代码，只需要澄清哪些代码应该放在哪里。我会试一试，看看有什么用。我已经在梳理谷歌搜索，但没有找到任何满足我特定需求的东西。谢谢你的帮助！！
预订/预订按钮非常适合验证码验证。我现在遇到的问题是重定向。 <input type="hidden" id="skip_WhereToReturn" name="skip_WhereToReturn" value="resconfirm.shtml" /> 在input 标签内有两个值（一个重定向用于预订，一个用于预订）的内联javascript if/then 是否有效？或者我是否可以将重定向值链接到我的服务器上的外部 php，在使用验证码验证数据后，在我这边使用 if/then 再次路由和解析到两个重定向页面？这些有意义吗？
我试过这个，但我的验证码抱怨id="skip_WhereToReturn没有价值：function formType(name){ if (name == 'reservation') { window.location = "http://www.happywivestravel.com/tours/machupicchu/mp-NOVconfirm.shtml"; } else { window.location = "http://www.happywivestravel.com"; } }