php - 1 个表单 2 个带有验证码的提交按钮

Question

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

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

Answer 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 部分进入 <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 方法获取数据的任何帮助，请查看此处:Here .

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

希望这对您有帮助。

如果您有任何疑问，请随时提问!