Sunday, October 7, 2012

Using the Search Form and Iframes

If you want to use a "book now" form where guests enter their dates on your website you have to pass the variables to YOUR page which then passes them to the URL in the iframe.  This can be done using programming, such as PHP, ASP, etc, or with javascript.  Here is a way to do this in javascript so that you don't have to write any code. 

There are three things you need to do:

1. Put this javascript in the HEAD section for the page that contains the iframe:

<script lang="javascript" type="text/javascript">
var qrStr = window.location.search;
var spQrStr = qrStr.substring(1);
var arrQrStr = new Array();
// splits each of pair
var arr = spQrStr.split('&');
for (var i=0;i<arr.length;i++){
// splits each of field-value pair
var index = arr[i].indexOf('=');
var key = arr[i].substring(0,index);
var val = arr[i].substring(index+1);
// saves each of field-value pair in an array variable
arrQrStr[key] = val; }
var arrive=arrQrStr["a"];
var depart=arrQrStr["d"];
var numguests=arrQrStr["g"];
</script>


2. Modify the search box code
The first line should be changed like this (put url of your page with the iframe):
<input type=hidden name=respage id=respage value="http://www.YOURWEBSITE.com/index.htm" />

The book now button line should be like this:
<input type=button value="Book Now" onclick="window.location=
document.getElementById('respage').value +'?a='+ document.getElementById('checkin').value.replace(/\//g,'.')+'&d='+ document.getElementById('checkout').value.replace(/\//g,'.')+'&g='+ document.getElementById('numguests').value" />

3. Replace the iframe code with this:

<script lang="javascript" type="text/javascript">
var reservationpageurl="http://v2.reservationkey.com/YOUR RESERVATIONKEY URL/";
if (arrive) {
    document.write("<IFRAME SRC='"+reservationpageurl+"s|"+arrive+"|"+depart+"|"+numguests+"' name='publicpage' width=100% height=1600px  frameborder=0></IFRAME>");
} else {
    document.write("<IFRAME SRC='"+reservationpageurl+"' name='publicpage' width=100% height=1600px  frameborder=0></IFRAME>");
}
</script>


If you will be taking credit cards on your reservation page, you will need to consider whether or not you might want your own SSL certificate.  A complete discussion of these issues is found in this blog post: http://reservationkey.blogspot.com/2012/02/do-you-need-your-own-ssl-certificate.html

No comments:

Post a Comment