Hello,
I have a hotel booking form (with js) which works ok on my non-joomla site. I tried to insert this form into my Joomla template to see if it works. The form showed up but the fields which are displayed using java script didn't.
I would like to place my form into a module.
I downloaded the mod_chronocontact_V3.1_RC5.2.zip module and zip.png
ChronoForms_V3.1_RC5.5.zip.
My question is - is ChronoForms the right component for me and if it is than how do I make this work?
Thank you!!!!
I have a hotel booking form (with js) which works ok on my non-joomla site. I tried to insert this form into my Joomla template to see if it works. The form showed up but the fields which are displayed using java script didn't.
I would like to place my form into a module.
I downloaded the mod_chronocontact_V3.1_RC5.2.zip module and zip.png
ChronoForms_V3.1_RC5.5.zip.
My question is - is ChronoForms the right component for me and if it is than how do I make this work?
Thank you!!!!
Hi jenna23,
It's almost certainly possible to add your form in ChronoForms and adapt the script to work. Hard to say much more than that without more info.
Bob
It's almost certainly possible to add your form in ChronoForms and adapt the script to work. Hard to say much more than that without more info.
Bob
Hi, can you recommend a tutorial? From what I see in my admin the extension allows me to create a form from scratch. I need to find out how to insert a form that's already created.
Thank you!!!
Here is the form
Thank you!!!
Here is the form
<form name="myForm" method="get" action="somedomain.com" onSubmit="javascript:return group();" id="hotelform">
<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>
</form>
<script language="javascript">
<!--
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;
}
}
//-->
</script>
<!-- Calendar Code -->
<script langauage="javascript">
<!--
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);
}
//-->
</script>
<!-- /Calendar Code -->
<!-- my custom search box -->
<script language="javascript">
<!--
// 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 ?:";
//-->
</script>
<!-- NOTE: DO NOT MODIFY THIS JAVASCRIPT BLOCK -->
<script language="javascript">
<!--
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);
}
//-->
</script>
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.
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
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> 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
I did exactly what you asked me to do, but the form is partially hidden (java script doesn't display the fields). Here is the screeshot.
Hi jenna23,
I'm afraid that you have some JavaScript debugging to do. There appear to be problems both with ths loading sequence of the scripts and the script scope. I spent a while looking at this and while I made some prgress I haven't resolved it.
Bob
I'm afraid that you have some JavaScript debugging to do. There appear to be problems both with ths loading sequence of the scripts and the script scope. I spent a while looking at this and while I made some prgress I haven't resolved it.
Bob
Bob, do you think you would be able to make the form work if I buy some of your time? I'm on a budget, so I can offer $20. Please let me know if you could help me.
How could I ask this question to a java script expert who doesn't know anything about joomla. Could you give me the exact questions to ask such person?
Thank you!!!!
How could I ask this question to a java script expert who doesn't know anything about joomla. Could you give me the exact questions to ask such person?
Thank you!!!!
This topic is locked and no more replies can be posted.
