Operations | October 7, 2012 | 2 min read
Using the Search Form and Iframes
If you want to use a "book now" form where guests enter their dates on your website, you can pass values to your iframe URL using JavaScript.
If you want to use a "book now" form where guests enter their dates on your website, you need to pass the variables to your page and then pass them to the URL in the iframe.
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 pair
var arr = spQrStr.split('&');
for (var i = 0; i < arr.length; i++) {
// splits each field-value pair
var index = arr[i].indexOf('=');
var key = arr[i].substring(0, index);
var val = arr[i].substring(index + 1);
// saves each 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/469/Reservations/";
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, consider whether you want your own SSL certificate. A complete discussion is in this blog post:
http://reservationkey.blogspot.com/2012/02/do-you-need-your-own-ssl-certificate.html