Hi Jenna23,
In the ChronoForms Forma Mananger click the New icon to create a new form. Give it name like 'bookings'.
Click the Form Code tab and then the +/- sign by the Form Html box. Copy and paste the part of your form **between the <form> and </form> tags** but not the tags themselves.
<input type="hidden" name="cid" value="86849"> <!-- change to your cid -->
<input type="hidden" name="pageName" value="hotSearch">
<input type="hidden" name="validateDates" value="true">
<input type="hidden" name="validateCity" value="true">
<input type="hidden" name="submitted" value="true">
<input type="hidden" name="arrivalMonth" value="">
<input type="hidden" name="departureMonth" value="">
<input type="hidden" name="arrivalDay" value="">
<input type="hidden" name="departureDay" value="">
<input type="hidden" name="mode" value="2">
<input type="hidden" name="avail" value="true">
<input type="hidden" name="passThrough" value="true">
<input type="hidden" name="propertyType" value="A">
<input type="hidden" name="locale" value="en_US">
<p><label>City</label><input name="city" class="city"></p>
<p><label>Check in</label><input name="dateField" class="date"> <a onmouseover="window.status ='';return true;" onmouseout="window.status='';return true;" href="javascript:openCalendar('myForm', 'dateField');" ><img src="icons/calendar.gif" align="top" style="border-right:10px solid #fff"></a>
Nights
<select NAME="numberOfNights">
<option value="1" selected="selected">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>
</select>
</p>
<p>
<div id="hot-search-params" style="margin:-10px 0 0 7px"></div><input type="submit" value="Search" class="hotelsubmit">
<img src="blank.gif" width="0" height="0" onload="initializeDates();"></p> Close the Form HTML box and open the Form JavaScript box. In there paste the JavaScript without the <script> tags (there are several pairs to remove).
function initializeDates(){
var d = new Date();
d.setMonth(d.getMonth(), d.getDate()+14);
document.forms['myForm'].elements['dateField'].value = getFormattedMonth(d.getMonth()) + "/" + getFormattedDay(d.getDate()) + "/" + d.getFullYear();
}
function travelNowize() {
// travelnow provided this code which takes the "dateField" and "numberOfNights" and does the math
// to get a checkin and checkout date
var intNight = document.forms['myForm'].numberOfNights.value;
var dt = new Date(document.forms['myForm'].dateField.value);
var adt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()+(document.forms['myForm'].numberOfNights.selectedIndex+1) );
document.forms['myForm'].departureDay.value = adt.getDate();
document.forms['myForm'].departureMonth.value = adt.getMonth();
document.forms['myForm'].arrivalDay.value = dt.getDate();
document.forms['myForm'].arrivalMonth.value = dt.getMonth();
}
function group() {
if (document.myForm.numberOfRooms.selectedIndex == 8) {
window.location="";
return false;
} else {
travelNowize();
return true;
}
}
// Calendar Code
function getFormattedMonth(themonth) {
if (themonth < 9) {
switch(themonth) {
case 0: return '01';
case 1: return '02';
case 2: return '03';
case 3: return '04';
case 4: return '05';
case 5: return '06';
case 6: return '07';
case 7: return '08';
case 8: return '09';
}
}
return themonth+1;
}
function getFormattedDay(theday) {
if (theday < 10) {
switch(theday) {
case 1: return '01';
case 2: return '02';
case 3: return '03';
case 4: return '04';
case 5: return '05';
case 6: return '06';
case 7: return '07';
case 8: return '08';
case 9: return '09';
}
}
return theday;
}
function update(themonth,theday,theyear){
document.forms[fName].elements['dateField'].value = getFormattedMonth(themonth) + "/" + getFormattedDay(theday) + "/" + theyear;
testWindow.close();
}
function loadCalendar(viewMonth) {
testWindow.document.close();
testWindow.document.open();
var day_of_week = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var month_of_year = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var dateObj = new Date();
var year = dateObj.getFullYear(); // Returns year
var month = dateObj.getMonth(); // Returns month (0-11)
var today = dateObj.getDate(); // Returns day (1-31)
var weekday = dateObj.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
if (viewMonth < month) {
year = year + 1;
}
if(year < 1900){
year += 1900; //done to solve the problem of netscape and mozilla returning year in form 10X for years > 2000
}
month = viewMonth;
dateObj.setDate(1); // Start the calendar day at '1'
dateObj.setMonth(month); // Start the calendar month at now
dateObj.setFullYear((year));
// VARIABLES FOR FORMATTING
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';
var prevM = month - 1;
var nextM = month + 1;
if (nextM == 12) {
nextM = 0;
}
if (prevM == -1) {
prevM = 11;
}
// BEGIN CODE FOR CALENDAR
cal = '<html><head><title>Calendar</title></head><body>';
cal += '<style>a{cursor: hand}body,table,td{cursor: default;font-family:sans-serif;font-size:12px;color:black;}p.masterHEADER {background: gray; color:white; font-weight: bold; font-size: 13px;margin:0;padding:5px;text-align: center;}</style>';
cal += '<div style="border:black 1px solid;">';
cal += '<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" width="100%">' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '"><p class=masterHEADER>';
cal += month_of_year[month] + ' ' + year + '</p>' + TD_end + TR_end;
cal += TR_start;
///////////////////////////////////
// DO NOT EDIT BELOW THIS POINT //
///////////////////////////////////
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++) {
// PRINTS DAY
cal += TD_start + day_of_week[index] + TD_end;
}
cal += TD_end + TR_end;
cal += TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < dateObj.getDay(); index++) {
cal += TD_start + ' ' + TD_end;
}
// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++) {
if( dateObj.getDate() > index ) {
// RETURNS THE NEXT DAY TO PRINT
week_day =dateObj.getDay();
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0) {
cal += TR_start;
}
if(week_day != DAYS_OF_WEEK) {
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = dateObj.getDate();
// PRINTS DAY
cal += TD_start + "<span onclick='window.opener.update(" + month + "," + day + "," + year +")'>" + day + "</span>" + TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK) {
cal += TR_end;
}
}
// INCREMENTS UNTIL END OF THE MONTH
dateObj.setDate(dateObj.getDate()+1);
}// end for loop
cal += '</td></TR></TABLE></div><br>';
cal += '<div align="center"><a href="javascript:" onClick="window.opener.loadCalendar(' + prevM + ');"><<</a> ';
cal += '<a href="javascript:" onClick="window.opener.loadCalendar(' + nextM + ');">>></a></div>';
cal += '<a href="javascript:window.close();" style="float:right">close</a>';
cal += '</body></html>';
// PRINT CALENDAR
testWindow.document.write(cal);
}
var testWindow;
var fieldName;
var fName;
function openCalendar(formName, field) {
fieldName=field;
fName=formName;
testWindow = window.open('','dates','width=300,height=225,resizable=1,status=1,menubar=0,location=0');
var month = document.forms[fName].elements[fieldName].value;
var dateRegExp = new RegExp("^(([1][0-2])|([0]?[1-9]))/(([0123]?[0-9])|[0-9])(/((20)?[0-9]{2}))?"); //looks for mm/dd
if (month.match(dateRegExp)) {
month = document.forms[fName].elements[fieldName].value.split("/")[0] - 1;
} else {
month = new Date().getMonth();
}
loadCalendar(month);
}
// /Calendar Code
// my custom search box
// NOTE: customize variables in this javascript block as appropriate.
var defaultAdults="2";
var cellStyle="";
var childHelp="<p style=font-size:12px;color:#3D658D>Ages at the time of travel.</p>";
var adultHelp="";
var textRooms="Rooms";
var textAdults="Adults ";
var textChildren="Children -18";
var textChildError="Please specify the ages of all children.";
var pad='<img src="blank.gif" width="2" height="1">';
// NOTE: Question marks ("?") get replaced with a numeric value
var textRoomX=" Room ?:";
var textChildX="Child ?:";
// NOTE: DO NOT MODIFY THIS JAVASCRIPT BLOCK
var adultsPerRoom=new Array(defaultAdults);
var childrenPerRoom=new Array();
var childAgesPerRoom=new Array();
var numRooms=1;
var maxChildren=0;
refresh();
function setChildAge(room, child, age) {
if (childAgesPerRoom[room] == null) {
childAgesPerRoom[room] = new Array();
}
childAgesPerRoom[room][child] = age;
}
function setNumAdults(room, numAdults) {
adultsPerRoom[room] = numAdults;
}
function setNumChildren(room, numChildren) {
childrenPerRoom[room] = numChildren;
refresh();
}
function setNumRooms(x) {
numRooms = x;
for (i = 0; i < x; i++) {
if (adultsPerRoom[i] == null) {
adultsPerRoom[i] = 2;
}
if (childrenPerRoom[i] == null) {
childrenPerRoom[i] = 0;
}
}
refresh();
}
function renderRoomSelect() {
var x = '';
x += '<select name="numberOfRooms" onchange="setNumRooms(this.options[this.selectedIndex].value);">';
for (var i = 1; i < 9; i++) {
x += '<option value="'+i+'"'+(numRooms == i ? ' selected' : '')+'>' + i;
}
x += '<option value="9"'+(numRooms == 9 ? ' selected' : '')+'>9+';
x += '</select>';
return x;
}
function refresh() {
maxChildren = 0;
for (var i = 0; i < numRooms; i++) {
if (childrenPerRoom[i] > maxChildren) {
maxChildren = childrenPerRoom[i];
}
}
var x = '';
if (adultHelp.length > 0) {
x = adultHelp + "<p>\n";
}
if (numRooms > 8) {
x += textRooms;
x += renderRoomSelect();
} else {
x += '<table border="0" cellspacing="1" cellpadding="0">\n';
x += '<tr><td'+cellStyle+'>'+textRooms+pad+'</td>';
if (numRooms >= 1) {
x += '<td'+cellStyle+'> </td>';
}
x += '<td'+cellStyle+'><nobr>'+textAdults+pad+'</nobr></td><td'+cellStyle+'><nobr>'+textChildren+pad+'</nobr></td></tr>\n';
for (var i = 0; i < numRooms; i++) {
x += '<tr><td'+cellStyle+'>';
if (i == 0) {
x += renderRoomSelect();
} else {
x += ' ';
}
x += '</td>';
if (numRooms >= 1) {
x += '<td'+cellStyle+'><nobr>'+getValue(textRoomX, i+1)+pad + '</nobr></td>';
}
x += '<td'+cellStyle+'>';
x += buildSelect('room-' + i + '-adult-total', 'setNumAdults(' + i + ', this.options[this.selectedIndex].value)', 1, 4, adultsPerRoom[i]);
x += '</td><td'+cellStyle+'> ';
x += buildSelect('room-' + i + '-child-total', 'setNumChildren(' + i + ', this.options[this.selectedIndex].value)', 0, 4, childrenPerRoom[i]);
x += '</td></tr>\n';
}
x += '</table>\n';
var didHeader = false;
for (var i = 0; i < numRooms; i++) {
if (childrenPerRoom[i] > 0) {
if (!didHeader) {
x += '<table border="0" cellpadding="0" cellspacing="1">\n';
x += '<tr><td'+cellStyle+' colspan="'+(maxChildren+1)+'">';
x += '<img src="blank.gif" width="1" height="1"><br>';
x += childHelp;
x += '<img src="blank.gif" width="1" height="1"><br>';
x += '</td></tr>\n<tr><td'+cellStyle+'> </td>';
for (var j = 0; j < maxChildren; j++) {
x += '<td'+cellStyle+'><nobr>'+getValue(textChildX, j+1)+pad+'</nobr></td>\n';
}
didHeader = true;
}
x += '</tr>\n<tr><td'+cellStyle+'><nobr>'+getValue(textRoomX, i+1)+pad+'</nobr></td>';
for (var j = 0; j < childrenPerRoom[i]; j++) {
x += '<td'+cellStyle+'>';
var def = -1;
if (childAgesPerRoom[i] != null) {
if (childAgesPerRoom[i][j] != null) {
def = childAgesPerRoom[i][j];
}
}
x += '<select name="room-'+i+'-child-'+j+'-age" onchange="setChildAge('+i+', '+j+', this.options[this.selectedIndex].value);">';
x += '<option value="-1"'+(def == -1 ? ' selected' : '')+'>-?-';
x += '<option value="0"'+(def == 0 ? ' selected' : '')+'><1';
for (var k = 1; k <= 18; k++) {
x += '<option value="'+k+'"'+(def == k ? ' selected' : '')+'>'+k;
}
x += '</td>';
}
if (childrenPerRoom[i] < maxChildren) {
for (var j = childrenPerRoom[i]; j < maxChildren; j++) {
x += '<td'+cellStyle+'> </td>';
}
}
x += '</tr>\n';
}
}
if (didHeader) {
x += '</table>\n';
}
}
document.getElementById("hot-search-params").innerHTML = x;
}
function buildSelect(name, onchange, min, max, selected) {
var x = '<select name="' + name + '"';
if (onchange != null) {
x += ' onchange="' + onchange + '"';
}
x +='>\n';
for (var i = min; i <= max; i++) {
x += '<option value="' + i + '"';
if (i == selected) {
x += ' selected';
}
x += '>' + i + '\n';
}
x += '</select>';
return x;
}
function validateGuests(form) {
if (numRooms < 9) {
var missingAge = false;
for (var i = 0; i < numRooms; i++) {
var numChildren = childrenPerRoom[i];
if (numChildren != null && numChildren > 0) {
for (var j = 0; j < numChildren; j++) {
if (childAgesPerRoom[i] == null || childAgesPerRoom[i][j] == null || childAgesPerRoom[i][j] == -1) {
missingAge = true;
}
}
}
}
if (missingAge) {
alert(textChildError);
return false;
} else {
return true;
}
} else {
return true;
}
}
function submitGuestInfoForm(form) {
if (!validateGuests(form)) {
return false;
}
return true;
}
function getValue(str, val) {
return str.replace(/\?/g, val);
}In the JavScript you need to change the form references to match the ChronoForms name. This probably means replacing
document.forms['myForm'] with
document.forms['ChronoContact_bookings'] assuming that your new form is called 'bookings'.
Save the form and test.
Bob
