1表格2用验证码提交按钮

Question

I am working on a booking page form. I want a single form where clients fill out their info, and two submit buttons at the bottom: one that holds their reservation for 72 hours, and another that allows them to book now and continue on to a checkout page. The first button should send the data to me via email, then redirect the user to a static html page. The second button should also send the data to me via email, then redirect the user to a checkout page.

First, is having two submit buttons in this manner even possible? I've seen posts about having Agree/Disagree buttons, where the disagree button more or less cancels out the form, and the agree button passes on the data. I need both buttons to pass on data, but with different post actions.

Second, I have a free captcha inserted into my form; I'm sick of getting bot form returns in my email inbox. I have the captcha working lovely with 1 submit button. But I'm at a complete loss for how to impliment the captcha with two submit buttons.

Here's my code, with the captcha and one working submit button (the other button is not yet "hooked up" and working):

<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 -->

The captcha can be used multiple times on the same page, according to their website. I really like the images used on SnapHost.com, many of my clients will be older, and these are the easiest images to read that I've come across, so I'm hoping I can keep using SnapHost and still accomplish my double submit button needs.

If anyone has any ideas on (A) if this is do-able and (B) where to begin to code the double submit button/captcha that will work together, I'd really appreciate the help!! I'm not sure if I need php (which I know nothing of) or javascript or jQuery (of which I know a little) or something else completely. Thank you!!

---

UPDATE

---

I tried this code, and while it redirects to the correct page, the captcha doesn't validate, AND my form results don't get sent back to me. Got my hopes up for a moment, only to come crashing back down to earth!

<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">

I also deleted this

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

code from the top of the form, thinking it'd be replaced with the onClick function in the input tag, but clearly that's not the answer here.

I was hoping for a nice simple fix, but this wasn't it. Anyone with any other ideas?

Answer 1

Update: Checking your code, question and answer again I came up with this:

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>

This part of the code goes on the page where your form lies, I'm not used to working with captcha's so I hope you can figure out the validation yourself.

Original code :

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

Changed :

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

I've added a name to your <form> element in order to interact with it using document.forms . Further I've noticed that your action in your <form> goes to SnapHost.com. Which means your site will get redirected to SnapHost.com and that you should get the information using $_POST there. Since this is probably not your website, you should figure out another way to use the SnapHost images on your site without redirecting to SnapHost.com

If this IS your website, then you could use this PHP code to get the Data filled in the form :

 <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>

The isset statement checks wether a variable, or in this case a button has been "set". So if you would click your "Reservation" button the if statement sees that the "Reservation" button has been set.

The PHP part of the code goes into the <head> of the page where your <form action> redirects to.

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>

Note that I've added a name to the above submit buttons, also note that you should always close <input> elements with the /> tag. This is W3C Standard I believe. Also, so far I've read a submit button can't have a Click function, but I'm not quite sure about this.

If you need any help on getting data using PHP & the $_POST method look here : Here .

Note that stackoverflow.com is not for writing you complete code's, searching the web and using google goes first, if you can't figure it out after that, ask here.

I hope this helps you.

If you have any questions, feel free to ask!