Skip to content

Instantly share code, notes, and snippets.

@gusdecool

gusdecool/form-booking

Created December 1, 2013 10:08
Show Gist options
  • Save gusdecool/7730875 to your computer and use it in GitHub Desktop.
Save gusdecool/7730875 to your computer and use it in GitHub Desktop.
Download ZIP
Code booking sandiphala
Raw
form-booking
<script language="JavaScript">
/******************************
* Editable section -- Start --
******************************/
// DATE SETTINGS - EDIT AS REQUIRED
var daysinAdvance = 1; // Sets default days in advance from current date
var numberNights = 3; // Sets default number of nights
var numberYears = 3; // Sets default number of years to display in year select list
var numberNightsMin = 1; // Sets minimum number of nights accepted
var imgDir = "images/"; // Directory for the dynamic calendar script and images. Trailing slash must be included.
// FLAG SETTINGS ON/OFF - SET TO 1 FOR ON &amp; 0 FOR OFF
var wdDisplay = 1; //weekday display
var numberNightsDisplay = 0; //number of nights display
var departDateDisplay = 1; //departure dates display
var departDateUpdate = 1; //auto update departure date
// WEEK DAY AND NUMBER NIGHTS TEXT - EDIT TEXT AS REQUIRED
var wdArray = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
var nightTxt = " Night";
var nightsTxt = " Nights";
// ERROR MESSAGE TEXT - EDIT TEXT AS REQUIRED
var invalidDateTxt = "Invalid Arrival Date. Please check number of days selected";
var invalidDatePriorTxt = "Arrival Date selected is prior Today's date. Please change...";
var invalidDepartDateTxt = "Invalid Departure Date. Please check number of days selected";
var invalidDepartTxt = "Departure Date is prior to Arrival Date selected. Please change...";
var invalidNightsTxt = "Sorry, reservations under "+numberNightsMin+" nights are not accepted.";
/******************************
* Editable section -- End --
******************************/
/**************************************************
* DO NOT CHANGE JAVASCRIPT SETTINGS BELOW THIS LINE
**************************************************/
//Days in each month Array
var aNumDays = new Array (31,0,31,30,31,30,31,31,30,31,30,31);
//Cancel out if no departure date display
if(departDateDisplay == 0) {
numberNightsDisplay = 0;
departDateUpdate = 0;
}
//Sets dates selected from dyncalendar
function calendarCallback(day, month, year, objName, formName) {
if(objName == "calendarArrive"){
document.forms[formName].fd.selectedIndex = day-1;
document.forms[formName].fm.selectedIndex = month-1;
document.forms[formName].fy.selectedIndex = year - document.forms[formName].fy.options[0].text;
updateDates(document.forms[formName]);
if(wdDisplay == 1) setWkd(formName, 1);
}else{ //objName == calendarDepart
document.forms[formName].td.selectedIndex = day-1;
document.forms[formName].tm.selectedIndex = month-1;
document.forms[formName].ty.selectedIndex = year - document.forms[formName].ty.options[0].text;
if(wdDisplay == 1) setWkd(formName, 1);
}
}
//Update form with selected dates
function updateDates(form, loadDates) {
//check Leap Year
if(form.fm.selectedIndex==1) {
var leapYear = new Date (form.fy.options[form.fy.selectedIndex].text,form.fm.selectedIndex+1,1);
var leapYear = new Date (leapYear - (24*60*60*1000));
var numDaysInMonth = leapYear.getDate();
}else{
var numDaysInMonth = aNumDays[form.fm.selectedIndex];
}
// Update departure date only when loading the form and/or departDateUpdate is set to 1
if(loadDates == 1 || departDateUpdate == 1) {
var selectDate = new Date(form.fy.options[form.fy.selectedIndex].text, form.fm.selectedIndex, form.fd.selectedIndex);
var setDate = new Date(selectDate.getTime() + ((numberNights+1) * 86400000));
var setDay = setDate.getDate();
var setMonth = setDate.getMonth();
var setYear = setDate.getFullYear() - form.fy.options[0].text;
var checkinDate = new Date(form.fy.options[form.fy.selectedIndex].text,form.fm.selectedIndex,form.fd.selectedIndex+1);
var checkoutDate = new Date(form.ty.options[form.ty.selectedIndex].text,form.tm.selectedIndex,form.td.selectedIndex+1);
if(checkinDate &gt; checkoutDate) {
if(setYear == form.ty.length) {
form.td.options[30].selected=1;
form.tm.options[11].selected=1;
form.ty.options[form.ty.length-1].selected=1;
} else {
form.td.options[setDay-1].selected=1;
form.tm.options[setMonth].selected=1;
form.ty.options[setYear].selected=1;
}
}
}
if(form.fd.selectedIndex+1 &gt; numDaysInMonth) {
alert(invalidDateTxt);
form.fd.selectedIndex = numDaysInMonth-1;
}
}
function setWkd(form, calendar) {
// change form object if returned from calendar
if(calendar) form = document.forms[form];
for (var i = 0; i &lt; form.fy.length; i++) {
if (form.fy.options[i].selected) var fyear = form.fy.options[i].text;
if (departDateDisplay == 1 &amp;&amp; form.ty.options[i].selected) var tyear = form.ty.options[i].text;
}
var checkinDate = new Date(fyear,form.fm.selectedIndex,form.fd.selectedIndex+1);
if (departDateDisplay == 1) var checkoutDate = new Date(tyear,form.tm.selectedIndex,form.td.selectedIndex+1);
var numNights = Math.round((checkoutDate - checkinDate) / 86400000);
if (numNights == 1) numNights += nightTxt;
else numNights += nightsTxt;
//Set Days of the week display
if(wdDisplay == 1 &amp;&amp; document.getElementById) {
document.getElementById('inWd').firstChild.nodeValue = '(' + wdArray[checkinDate.getDay()] + ')';
if (departDateDisplay == 1) document.getElementById('outWd').firstChild.nodeValue = '(' + wdArray[checkoutDate.getDay()] + ')';
}
//Set number of nights display
if(numberNightsDisplay == 1 &amp;&amp; document.getElementById) document.getElementById('lengthStay').firstChild.nodeValue = numNights;
}
//Load current dates on form load
function LoadDates(form) {
var curDate = new Date();
var setDate = new Date(curDate.getTime() + (daysinAdvance * 86400000));
var setDay = setDate.getDate();
var setMonth = setDate.getMonth();
var setYear = setDate.getFullYear() - form.fy.options[0].text;
// Set Arrival Dates
form.fd.selectedIndex = setDay-1;
form.fm.selectedIndex = setMonth;
form.fy.selectedIndex = setYear;
// Set the Departure Dates
updateDates(form, departDateDisplay);
if(wdDisplay == 1 || numberNightsDisplay == 1) setWkd(form);
}
//Load current dates on form load
function checkDates(form) {
var curDate = new Date();
for (var i = 0; i &lt; form.fy.length; i++) {
if (form.fy.options[i].selected) var fyear = form.fy.options[i].text;
if (departDateDisplay == 1 &amp;&amp; form.ty.options[i].selected) var tyear = form.ty.options[i].text;
}
var checkinDate = new Date(fyear,form.fm.selectedIndex,form.fd.selectedIndex+2);
if (departDateDisplay == 1) {
if(form.tm.selectedIndex==1) {
var leapYear = new Date (form.ty.options[form.ty.selectedIndex].text,form.tm.selectedIndex+1,1);
var leapYear = new Date (leapYear - (24*60*60*1000));
var numDaysInMonth = leapYear.getDate();
}else{
var numDaysInMonth = aNumDays[form.tm.selectedIndex];
}
if(form.td.selectedIndex+1 &gt; numDaysInMonth) {
alert(invalidDepartDateTxt);
form.td.selectedIndex = numDaysInMonth-1;
return false;
}
var checkoutDate = new Date(tyear,form.tm.selectedIndex,form.td.selectedIndex+2);
var numNights = Math.round((checkoutDate - checkinDate) / 86400000);
} else {
var numNights = form.numnights.selectedIndex+1;
}
if(checkinDate.getTime() &lt; curDate.getTime()) {
alert(invalidDatePriorTxt);
return false;
}
if(numNights &lt; 1) {
alert(invalidDepartTxt );
return false;
}
if(numNights &lt; numberNightsMin) {
alert(invalidNightsTxt);
return false;
}
}
//Generate years options for year select list
function year_option(form){
curDate = new Date();
curYear = curDate.getFullYear();
for(i = curYear ; i &lt;= curYear+(numberYears-1) ; i++ ){
document.write('&lt;option value="' + i + '"&gt;' + i + '&lt;/option&gt;');
}
}
</script>
<form target="_self" method="POST" action="http://www.globekey.com/reserve.php" name="DateSelect">
<table width="100%" cellspacing="0" cellpadding="4" bordercolor="#000000" border="0" bgcolor="" align="center">
<tbody><tr>
<td>
<table width="100%" cellspacing="1" cellpadding="0" border="0">
<tbody><tr>
<td align="left"><b>Arrival Date:</b></td>
</tr>
<tr>
<td align="left"><select onchange="updateDates(this.form);setWkd(this.form)" size="1" id="fd" name="fd">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select onchange="updateDates(this.form);setWkd(this.form)" size="1" id="fm" name="fm">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select onchange="updateDates(this.form);setWkd(this.form)" size="1" id="fy" name="fy">
<script type="text/javascript" language="JavaScript">year_option();</script><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option>
</select>
&nbsp;<span id="inWd">(Mon)</span> </td>
</tr>
<tr>
<td align="left"><b>Departure Date:</b></td>
</tr>
<tr>
<td align="left"><select onchange="setWkd(this.form)" size="1" id="td" name="td">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select onchange="setWkd(this.form)" size="1" id="tm" name="tm">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select onchange="setWkd(this.form)" size="1" id="ty" name="ty">
<script type="text/javascript" language="JavaScript">year_option();</script><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option>
</select>
&nbsp;<span id="outWd">(Thu)</span> </td>
</tr>
<tr>
<td align="left"><b>Occupants per Room:&nbsp;</b></td>
</tr>
<tr>
<td align="left">
<select id="adults" name="adults">
<option selected="">1</option>
<option>2</option>
<option>3</option>
</select> Adults +
<select id="child" name="child">
<option>0</option>
<option>1</option>
<option>2</option>
</select> Children </td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="left"><b>Promotional Code:</b></td>
</tr>
<tr>
<td align="left"><input type="text" value="" id="promo" name="promo"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" value="daysinAdvance=1;numberNights=3;numberYears=3;numberNightsMin=1;" name="settings1">
<input type="hidden" value="wdDisplay=1;numberNightsDisplay=0;departDateDisplay=1;" name="settings2">
<input type="hidden" value="yes" name="sh">
<input type="hidden" value="en" name="lang">
<input type="hidden" value="DPS1168" name="hid">
<input type="submit" onclick="return checkDates(this.form)" value="Check Availability / Book Now" name="availcheck">
<noscript>
&lt;br&gt;
&lt;font color=red&gt;
It appears that your browser does not support JavaScript, or you have it disabled.
The reservation system requires a JavaScript enabled browser.
&lt;p&gt;If JavaScript is disabled in your browser, please turn it back on then reload this page.&lt;/p&gt;
&lt;/font&gt;
</noscript>
</td>
</tr>
</tbody></table>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment