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标准我相信。另外，到目前为止我读过一个提交按钮不能有Click功能，但我对此并不十分肯定。

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

请注意，stackoverflow.com不是为了编写完整代码，搜索网页并首先使用谷歌，如果你在此之后无法弄明白，请在此处询问。

我希望这会对你有所帮助。

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

1表单2提交带验证码的按钮

1 个答案: