i working on booking page form. want single form clients fill out info, , 2 submit buttons @ bottom: 1 holds reservation 72 hours, , allows them book , continue on checkout page. first button should send data me via email, redirect user static html page. second button should send data me via email, redirect user checkout page.
first, having 2 submit buttons in manner possible? i've seen posts having agree/disagree buttons, disagree button more or less cancels out form, , agree button passes on data. need both buttons pass on data, different post actions.
second, have free captcha inserted form; i'm sick of getting bot form returns in email inbox. have captcha working lovely 1 submit button. i'm @ complete loss how impliment captcha 2 submit buttons.
here's code, captcha , 1 working submit button (the other button not yet "hooked up" , 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 intended prevent spam. captcha code generated online form processor. submit form, enter code text field. more information click on 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 protected spam <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 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 used multiple times on same page, according website. images used on snaphost.com, many of clients older, , these easiest images read i've come across, i'm hoping can keep using snaphost , still accomplish double submit button needs.
if has ideas on (a) if do-able , (b) begin code double submit button/captcha work together, i'd appreciate help!! i'm not sure if need php (which know nothing of) or javascript or jquery (of know little) or else completely. thank you!!
update
i tried code, , while redirects correct page, captcha doesn't validate, , form results don't sent me. got hopes moment, come crashing down earth!
<input type="submit" onclick="var e = document.getelementbyid('mpnov'); e.action='mp-novconfirm.shtml'; e.submit();" value="hold 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 deleted this
input type="hidden" id="skip_wheretoreturn" name="skip_wheretoreturn" value="http://www.happywivestravel.com/tours/machupicchu/mp-novconfirm.shtml" code top of form, thinking it'd replaced onclick function in input tag, that's not answer here.
i hoping nice simple fix, wasn't it. other ideas?
update: checking code, question , answer again came this:
javascript :
<head> <script type='text/javascript' > function validatereservation() { //you can validate captcha here document.forms['mpnov'].submit(); //this submits form } function validatebooking() { //you can validate captcha here document.forms['mpnov'].submit(); //this submits form } </script> </head> this part of code goes on page form lies, i'm not used working captcha's hope can figure out 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 name <form> element in order interact using document.forms . further i've noticed action in <form> goes snaphost.com. means site redirected snaphost.com , should information using $_post there. since not website, should figure out way use snaphost images on site without redirecting snaphost.com
if website, use php code data filled in form :
<head> <?php if($_server['request_method'] === 'post') //this if statement checks wether there's been $_post request... { if(isset($_post['reservation']) //is reservation button clicked? { //you can data here using $_post } if(isset($_post['booking']) //is booking button clicked? { //you can data here using $_post } } ?> </head> the isset statement checks wether variable, or in case button has been "set". if click "reservation" button if statement sees "reservation" button has been set.
the php part of code goes <head> of page <form action> redirects to.
html :
<td> <input type="button" onclick="validatereservation();" value="hold 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 i've added name above submit buttons, note should close <input> elements /> tag. w3c standard believe. also, far i've read submit button can't have click function, i'm not quite sure this.
if need on getting data using php & $_post method here : here .
note stackoverflow.com not writing complete code's, searching web , using google goes first, if can't figure out after that, ask here.
i hope helps you.
if have questions, feel free ask!
Comments
Post a Comment