Skip to content

Instantly share code, notes, and snippets.

@hikahi

hikahi/gist:49617

Created January 20, 2009 19:25
Show Gist options
  • Save hikahi/49617 to your computer and use it in GitHub Desktop.
Save hikahi/49617 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<?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">
var ErrorFields = new Array();
var CorrectFields = new Array();
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
});
});
function dateParser (date) {
str1 = date;
dt1 = parseInt(str1.substring(0,2),10);
mon1 = parseInt(str1.substring(3,5),10);
yr1 = parseInt(str1.substring(6,10),10);
depart1 = new Date(yr1, mon1, dt1);
parsedDate = new Date(date);
return parsedDate;
}
/* Checks for blank / default date fields first */
/* then checks for date continuity. */
function travelDates (elementName) {
dateArray = new Array();
for (i=0; i < document.getElementsByName(elementName).length; i++) {
dateArray[i] = new Date(document.getElementsByName(elementName)[i].value);
}
blankDates = 0;
for (i=0; i < document.getElementsByName(elementName).length; i++) {
if (document.getElementsByName(elementName)[i] == "MM/YY/YYYY" ||
document.getElementsByName(elementName)[i] == "") {
blankDates = 1;
break;
}
}
if (blankDates) {
ErrorFields[ErrorFields.length] = elementName + "s-blank";
return;
} else {
CorrectFields[CorrectFields.length] = elementName + "s-blank";
}
badDates = 0;
for (i=0; i < dateArray.length - 1; i++) {
if (dateArray[i] > dateArray[i+1]) {
badDates = 1;
break;
}
}
if (badDates) {
ErrorFields[ErrorFields.length] = elementName + "s-nomatch";
} else {
CorrectFields[CorrectFields.length] = elementName + "s-nomatch";
}
}
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
function ValidateForm(){
$("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");
travelDates("hotel-date");
travelDates("car-date");
/* 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">
&nbsp;
</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>
<p class="alert-small" id="alert-origin">You must set your origin.</p>
<div class="floating-input">
<label>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">
<p class="alert-small" id="alert-destination">You must set your destination.</p>
<label>Going To:</label>
<select id="destination" class="mid">
<option value="Hawaii">Hawaii</option>
</select>
</div>
<div class="floating-input">
<p class="alert-small" id="alert-air-dates-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-dates-blank">You must select travel dates.</p>
<label id="departure">Departing:</label>
<input name="air-date" id="depart" 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">
<p class="alert-small" id="alert-sub-destination">You must specify a region.</p>
<div class="floating-input">
<label>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">
<p class="alert-small" id="alert-hotel-dates-nomatch">Your check in date must be before your check out date.</p>
<p class="alert-small" id="alert-hotel-dates-blank">You must select dates.</p>
<label id="checkin-label">Checking-In:</label>
<input name="hotel-date" id="checkin" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label id="checkout-label">Checking-Out:</label>
<input name="hotel-date" id="checkout" 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="floating-input">
<label>Car Size:</label>
<select class="small">
<option value="">All</option>
</select>
</div>
<div class="floating-input">
<p class="alert-small" id="alert-car-dates-nomatch">Your pick up date must be before your drop off date.</p>
<p class="alert-small" id="alert-car-dates-blank">You must select dates.</p>
<label>Pick Up:</label>
<input name="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
<div class="floating-input">
<label>Drop Off:</label>
<input name="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">
<p class="alert-small" id="alert-air-dates-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-dates-blank">You must select travel dates.</p>
<div class="floating-input">
<label id="returning">Depart Destination 1:</label>
<input name="air-date" id="return" 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">
<p class="alert-small" id="alert-sub-destination2">You must specify a region.</p>
<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">
<p class="alert-small" id="alert-hotel-dates-nomatch">Your check in date must be before your check out date.</p>
<p class="alert-small" id="alert-hotel-dates-blank">You must select dates.</p>
<label id="checkin-label">Checking-In:</label>
<input name="hotel-date" id="checkin" type="text" value="MM/DD/YYYY" class="small datepicker" onFocus="clearText(this)"/>
</div>
<div class="floating-input">
<label id="checkout-label2">Checking-Out:</label>
<input name="hotel-date" id="checkout2" 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="floating-input">
<label>Car Size:</label>
<select class="small">
<option value="">All</option>
</select>
</div>
<div class="floating-input">
<p class="alert-small" id="alert-car-dates-nomatch">Your pick up date must be before your drop off date.</p>
<p class="alert-small" id="alert-car-dates-blank">You must select dates.</p>
<label>Pick Up:</label>
<input name="car-date" type="text" value="MM/DD/YYYY" class="small datepicker" />
</div>
<div class="floating-input">
<label>Drop Off:</label>
<input name="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">
<p class="alert-small" id="alert-air-dates-nomatch">Your departure date must be before your return date.</p>
<p class="alert-small" id="alert-air-dates-blank">You must select travel dates.</p>
<div class="floating-input">
<label id="returning">Depart Destination 2:</label>
<input name="air-date" id="return" 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