Skip to content

Instantly share code, notes, and snippets.

@grampelberg

grampelberg/gist:50320

Forked from hikahi/gist:50319
Created January 21, 2009 22:43
Show Gist options
  • Save grampelberg/50320 to your computer and use it in GitHub Desktop.
Save grampelberg/50320 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
<?php
$isTALoggedIn = true;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multidestination Search - classicvacations.com</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/search.css" />
<link rel="stylesheet" type="text/css" href="css/ui.datepicker.css" />
<script type="text/javascript" src="js/equalcolumns.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/age-display.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
function calcMinDate(input) {
return { minDate: (input.id == "returning_date" ? $("#departing_date").datepicker("getDate") : new Date()), };
}
$(function() {
$('.datepicker').datepicker({
beforeShow: calcMinDate,
changeMonth: false,
changeYear: false,
closeAtTop: false,
currentText: '',
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
mandatory: true,
numberOfMonths: 2
});
});
/* Checks for blank / default date fields first */
/* then checks for date continuity. */
function travelDates (elementName, ErrorFields, CorrectFields) {
dateArray = new Array();
element_filter = 'input[name=' + elementName + ']'
for (i=0; i < $(element_filter).length; i++) {
element_value = $(element_filter)[i].value;
if (element_value == 'MM/DD/YYYY' || element_value == "") {
jQuery.extend(ErrorFields, [$(element_filter)[i].id + '-blank', $(element_filter)[i].id]);
else {
jQuery.extend(CorrectFields, [$(element_filter)[i].id + "-blank", $(element_filter)[i].id]);
}
if ( i < $(element_filter).length - 1) {
if (new Date($(element_filter)[i].value) < new Date($(element_filter)[i].value)) {
jQuery.extend(CorrectFields, [$(element_filter)[i].id + '-nomatch', $(element_filter)[i].id, $(element_filter)[i + 1].id + '-nomatch', $(element_filter)[i + 1].id]);
else {
jQuery.extend(ErrorFields, [$(element_filter)[i].id + '-nomatch', $(element_filter)[i].id, $(element_filter)[i + 1].id + '-nomatch', $(element_filter)[i + 1].id]);
}
}
}
}
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
function ValidateForm(){
var ErrorFields = new Array();
var CorrectFields = new Array();
$("label").removeClass("error");
/* check fields */
if ($("#origin").val() == ""){
ErrorFields[ErrorFields.length] = "origin";
} else {
CorrectFields[CorrectFields.length] = "origin";
}
if ($("#destination").val() == ""){
ErrorFields[ErrorFields.length] = "destination";
} else {
CorrectFields[CorrectFields.length] = "destination";
}
if ($("#sub-destination").val() == ""){
ErrorFields[ErrorFields.length] = "sub-destination";
} else {
CorrectFields[CorrectFields.length] = "sub-destination";
}
if ($("#sub-destination2").val() == ""){
ErrorFields[ErrorFields.length] = "sub-destination2";
} else {
CorrectFields[CorrectFields.length] = "sub-destination2";
}
if (!isZip($("#shipping-zip").val())){
ErrorFields[ErrorFields.length] = "shipping-zip";
} else {
CorrectFields[CorrectFields.length] = "shipping-zip";
}
/* Checks for blank / default date fields first */
/* then checks for date continuity. */
travelDates("air-date", ErrorFields, CorrectFields);
travelDates("hotel-date", ErrorFields, CorrectFields);
travelDates("car-date", ErrorFields, CorrectFields);
/* ta fee */
if ($('#ta-agency-planning-fee-checkbox').attr('checked')) {
if (!isUSCurrency($("#ta-agency-planning-fee").val())){
ErrorFields[ErrorFields.length] = "ta-agency-planning-fee";
} else {
CorrectFields[CorrectFields.length] = "ta-agency-planning-fee";
}
}
/* Remove error states from corrected fields */
for(i = 0; i<CorrectFields.length; i++){
$("#"+CorrectFields[i]).removeClass("error");
$("#label-"+CorrectFields[i]).removeClass("error");
$("#alert-"+CorrectFields[i]).fadeOut(300);
}
/* did we get an error ? */
if (ErrorFields.length == 0){
$("#main-alert").fadeOut(1);
$("#address-new-form").submit();
} else {
$("#main-alert").fadeIn(300);
for(i = 0; i < ErrorFields.length; i++){
$('#'+ErrorFields[i]).addClass("error");
$("#label-"+ErrorFields[i]).addClass("error");
$("#alert-"+ErrorFields[i]).fadeIn(300);
}
}
}
</script>
</head>
<body>
<div id="wrap">
<?php require ("includes/page-elements/header.inc.php"); ?>
<?php require ("includes/page-elements/alert.inc.php"); ?>
<div id="breadcrumb">
 
</div>
<div id="search">
<div class="left" id="leftcolumn">
<div class="more-information">
<div class="the-classic-difference">
<h4>The Classic<br />Difference</h4>
<img src="images/search/the-classic-difference.gif" width="160" height="108" alt="The Classic Difference" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exlla commxlla commodo consequat.</p>
</div>
</div>
</div>
<div class="right" id="rightcolumn">
<div class="phone-number">Call a Travel Agent or 1.800.635.1333</div>
<div class="intro">
<h1>Create Your Vacation Package</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<form action="#">
<div class="heading"><h2>Trip Information</h2></div>
<div class="floating-inputs radios">
<input type="radio" class="radio" name="button1"/> <label>One Destination</label>
<input type="radio" class="radio" name="button1" checked="checked" /> <label>Multiple Destinations</label>
<!--<a href="#">Suggested Itineraries</a>-->
</div>
<p class="alert" id="main-alert">One or more items could not be confirmed.</p>
<div class="floating-inputs">
<p>Where would you like to travel?</p>
<span>
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-origin">You must set your origin.</p>
</div>
<div class="error-column-2" >
<p class="alert-small" id="alert-destination">You must set your destination.</p>
</div>
<div class="error-column-3" >
<p class="alert-small" id="alert-air-date-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-date-blank">You must select travel dates.</p>
</div>
<div style="clear: both"></div>
</div>
</span>
<div class="floating-input">
<label id="origin">Leaving From:</label>
<select id="origin" class="mid">
<option value="">No Option Selected</option>
<option value="sjc">San Jose, CA (SJC)</option>
</select>
</div>
<div class="floating-input">
<label>Going To:</label>
<select id="destination" class="mid">
<option value="">No Option Selected</option>
<option value="Hawaii">Hawaii</option>
</select>
</div>
<div class="floating-input">
<label id="air-date">Departing:</label>
<input name="air-date" id="air-date0" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label>Time:</label>
<select class="small">
<option value="">Any</option>
<option value="00:00">0:00 am</option>
<option value="01:00">1:00 am</option>
<option value="02:00">2:00 am</option>
<option value="03:00">3:00 am</option>
<option value="04:00">4:00 am</option>
<option value="05:00">5:00 am</option>
<option value="06:00">6:00 am</option>
<option value="07:00">7:00 am</option>
<option value="08:00">8:00 am</option>
<option value="09:00">9:00 am</option>
<option value="10:00">10:00 am</option>
<option value="11:00">11:00 am</option>
<option value="12:00">12:00 pm</option>
<option value="13:00">1:00 pm</option>
<option value="14:00">2:00 pm</option>
<option value="15:00">3:00 pm</option>
<option value="16:00">4:00 pm</option>
<option value="17:00">5:00 pm</option>
<option value="18:00">6:00 pm</option>
<option value="19:00">7:00 pm</option>
<option value="20:00">8:00 pm</option>
<option value="21:00">9:00 pm</option>
<option value="22:00">10:00 pm</option>
<option value="23:00">11:00 pm</option>
</select>
</div>
</div>
<div class="floating-inputs radios">
<input type="checkbox" class="checkbox" onclick="$('#all-destination-air').toggle(300);" /> <label>I do not need a flight.</label>
</div>
<div class="floating-inputs" id="all-destination-air">
<div class="floating-input">
<label>Flight Class:</label>
<select class="mid">
<option value="">All</option>
</select>
</div>
<div class="floating-input">
<label>Preferred Airline:</label>
<select class="mid">
<option value="">All</option>
</select>
</div>
</div>
<div class="floating-inputs">
<div class="floating-input number-rooms">
<label># of Rooms:</label>
<select class="tiny" id="number_rooms">
<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>
</select>
</div>
<div class="floating-input">
<?php require ("includes/page-elements/age-display.inc.php"); ?>
</div>
</div>
<div class="subheading-small">Destination 1</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="hotel">Hotel</h3></div>
<div class="floating-inputs">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-sub-destination">You must specify a region.</p>
</div>
<div class="error-column-3" >
<p class="alert-small" id="alert-hotel-date-nomatch">Your check in date must be before your check out date.</p>
<p class="alert-small" id="alert-hotel-date-blank">You must select dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label id="sub-destination">Which Island:</label>
<select id="sub-destination" class="mid">
<option value="">No Option Selected</option>
<option value="Maui">Maui</option>
</select>
</div>
<div class="floating-input">
<label id="hotel-date">Checking-In:</label>
<input name="hotel-date" id="hotel-date" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label id="hotel-date">Checking-Out:</label>
<input name="hotel-date" id="hotel-date" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="car">Car</h3></div>
<div class="floating-inputs radios">
<input type="checkbox" class="checkbox" onclick="$('#destination-1-car').toggle(300);" /> <label>I do not need a car.</label>
</div>
<div class="floating-inputs" id="destination-1-car">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-car-date-nomatch">Your pick up date must be before your drop off date.</p>
<p class="alert-small" id="alert-car-date-blank">You must select dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label>Car Size:</label>
<select class="small">
<option value="">All</option>
</select>
</div>
<div class="floating-input">
<label id="car-date">Pick Up:</label>
<input name="car-date" id="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
<div class="floating-input">
<label id="car-date">Drop Off:</label>
<input name="car-date" id="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="air">Air to next destination</h3></div>
<div class="floating-inputs radios">
<input type="checkbox" class="checkbox" onclick="$('#destination-1-air').toggle(300);" /> <label>I do not need airfare.</label>
<input type="checkbox" class="checkbox" /> <label>I prefer non-stop flights</label>
</div>
<div id="destination-1-air">
<div class="floating-inputs">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-air-date-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-date-blank">You must select travel dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label id="air-date">Depart Destination 1:</label>
<input name="air-date" id="air-date1" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label>Time:</label>
<select class="small">
<option value="">Any</option>
<option value="00:00">0:00 am</option>
<option value="01:00">1:00 am</option>
<option value="02:00">2:00 am</option>
<option value="03:00">3:00 am</option>
<option value="04:00">4:00 am</option>
<option value="05:00">5:00 am</option>
<option value="06:00">6:00 am</option>
<option value="07:00">7:00 am</option>
<option value="08:00">8:00 am</option>
<option value="09:00">9:00 am</option>
<option value="10:00">10:00 am</option>
<option value="11:00">11:00 am</option>
<option value="12:00">12:00 pm</option>
<option value="13:00">1:00 pm</option>
<option value="14:00">2:00 pm</option>
<option value="15:00">3:00 pm</option>
<option value="16:00">4:00 pm</option>
<option value="17:00">5:00 pm</option>
<option value="18:00">6:00 pm</option>
<option value="19:00">7:00 pm</option>
<option value="20:00">8:00 pm</option>
<option value="21:00">9:00 pm</option>
<option value="22:00">10:00 pm</option>
<option value="23:00">11:00 pm</option>
</select>
</div>
</div>
<div class="floating-inputs radios">
<p>Do you need roundtrip private transfers to and from the airport?</p>
<input type="radio" class="radio" name="button2" checked="checked" /> <label>Yes</label>
<input type="radio" class="radio" name="button2" /> <label>No</label>
</div>
</div>
<div class="subheading-small">Destination 2</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="hotel">Hotel</h3></div>
<div class="floating-inputs">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-sub-destination2">You must specify a region.</p>
</div>
<div class="error-column-2" >
<p class="alert-small" id="alert-hotel-date-nomatch">Your check in date must be before your check out date.</p>
<p class="alert-small" id="alert-hotel-date-blank">You must select dates.</p>
</div>
<div class="error-column-3" >
<p class="alert-small" id="alert-air-date-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-date-blank">You must select travel dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label>Which Island:</label>
<select id="sub-destination2" class="mid">
<option value="">No Option Selected</option>
<option value="Maui">Maui</option>
</select>
</div>
<div class="floating-input">
<label id="hotel-date">Checking-In:</label>
<input name="hotel-date" id="hotel-date" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label id="hotel-date">Checking-Out:</label>
<input name="hotel-date" id="hotel-date" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="car">Car</h3></div>
<div class="floating-inputs radios">
<input type="checkbox" class="checkbox" onclick="$('#destination-2-car').toggle(300);" /> <label>I do not need a car.</label>
</div>
<div class="floating-inputs" id="destination-2-car">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-car-date-nomatch">Your pick up date must be before your drop off date.</p>
<p class="alert-small" id="alert-car-date-blank">You must select dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label>Car Size:</label>
<select class="small">
<option value="">All</option>
</select>
</div>
<div class="floating-input">
<label id="car-date">Pick Up:</label>
<input name="car-date" id="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
<div class="floating-input">
<label id="car-date">Drop Off:</label>
<input name="car-date" id="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="subheading"><h3 class="air">Air returning home</h3></div>
<div class="floating-inputs">
<div class="error-row">
<div class="error-column-1" >
<p class="alert-small" id="alert-air-date-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-date-blank">You must select travel dates.</p>
</div>
<div style="clear: both"></div>
</div>
<div class="floating-input">
<label id="air-date">Depart Destination 2:</label>
<input name="air-date2" id="air-date" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label>Time:</label>
<select class="small">
<option value="">Any</option>
<option value="00:00">0:00 am</option>
<option value="01:00">1:00 am</option>
<option value="02:00">2:00 am</option>
<option value="03:00">3:00 am</option>
<option value="04:00">4:00 am</option>
<option value="05:00">5:00 am</option>
<option value="06:00">6:00 am</option>
<option value="07:00">7:00 am</option>
<option value="08:00">8:00 am</option>
<option value="09:00">9:00 am</option>
<option value="10:00">10:00 am</option>
<option value="11:00">11:00 am</option>
<option value="12:00">12:00 pm</option>
<option value="13:00">1:00 pm</option>
<option value="14:00">2:00 pm</option>
<option value="15:00">3:00 pm</option>
<option value="16:00">4:00 pm</option>
<option value="17:00">5:00 pm</option>
<option value="18:00">6:00 pm</option>
<option value="19:00">7:00 pm</option>
<option value="20:00">8:00 pm</option>
<option value="21:00">9:00 pm</option>
<option value="22:00">10:00 pm</option>
<option value="23:00">11:00 pm</option>
</select>
</div>
</div>
<div class="floating-inputs">
<p><a href="#"><img src="images/search/button-add-destination.gif" width="206" height="9" alt="Add Another Destination" /></a></p>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<div class="heading"><h2>Travel Protection</h2></div>
<div class="floating-inputs">
<div class="travel-protection">
<div class="row">
<div class="checkbox">
<input type="checkbox" checked="checked" />
</div>
<div class="description">
<p><strong>Travel Smart Plan</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...<a href="#">more</a></p>
</div>
<div class="pricing">
<a href="#">see pricing</a>
</div>
</div>
<?php
$LastRow = "";
if (!$isTALoggedIn){
$LastRow = "last ";
}
?>
<div class="<?php echo $LastRow; ?>row">
<div class="checkbox">
<input type="checkbox" />
</div>
<div class="description">
<p><strong>Classic Waiver</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...<a href="#">more</a></p>
</div>
<div class="pricing">
<strong>+50.00/adult</strong>
</div>
</div>
<?php
if ($isTALoggedIn){
?>
<div class="last row">
<div class="checkbox">
<input type="checkbox" id="ta-agency-planning-fee-checkbox" />
</div>
<div class="description">
<p><label id="label-ta-agency-planning-fee"><strong>Travel Agency Planning Fee</strong></label></p>
</div>
<div class="pricing">
<input type="text" class="small" id="ta-agency-planning-fee" value="xx.xx" onclick="this.value = '';"/>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="footcap"></div>
<div class="submit">
<a href="#" onclick="ValidateForm(); return false;"><img src="images/search/button-check-price.gif" width="226" height="27" alt="Submit" /></a>
</div>
</form>
</div>
</div>
<?php require ("includes/page-elements/footer.inc.php"); ?>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment