hello, i have a bit of a problem with my form.
basically i have 2 'custom features' on my form that work independantly but when they combine only one works.
let me show you what i mean..
if you goto the following page, choose a passenger and then click one of the radios..
http://londonheathrowcars.com/blob/blob.htm
i have a bit of javascript that inputs the address into the 'from' or 'to' textarea based on the passenger value and radio.. here is that code.
i also have a script that will hide some of the form elements depending on which radio they choose.. for example, if they choose Home to Airport, the from airport drop down under the From: disappears.. you can see it here, just click a few of the radios..
http://londonheathrowcars.com/blob/blob2.htm
when both these codes are used together, the visibility function doesn't work.. blob.htm actually has both scripts..
what i need help with is ensuring both scripts work simultanesouly. i would also need the address script to NOT send the value 'Airport' to anything.
is this clear enough, please help me, i learn fast!
oh yeah, here is the page code so you can have a look, ive tried to keep things as simple as possible
basically i have 2 'custom features' on my form that work independantly but when they combine only one works.
let me show you what i mean..
if you goto the following page, choose a passenger and then click one of the radios..
http://londonheathrowcars.com/blob/blob.htm
i have a bit of javascript that inputs the address into the 'from' or 'to' textarea based on the passenger value and radio.. here is that code.
Code:
var address = [
'',
'1 Jimmy Street',
'1 Jonny Street',
'1 Jelly Street'
];
function updateBooking() {
var passenger = document.getElementById('passenger');
var direction = this.value.split(" to ");
var passengerIndex = passenger.selectedIndex;
if (direction[0] === 'Home') {
direction[0] = address[passengerIndex];
}
if (direction[1] === 'Home') {
direction[1] = address[passengerIndex];
}
document.getElementById('from').value = direction[0];
document.getElementById('goingto').value = direction[1];
}
i also have a script that will hide some of the form elements depending on which radio they choose.. for example, if they choose Home to Airport, the from airport drop down under the From: disappears.. you can see it here, just click a few of the radios..
http://londonheathrowcars.com/blob/blob2.htm
when both these codes are used together, the visibility function doesn't work.. blob.htm actually has both scripts..
what i need help with is ensuring both scripts work simultanesouly. i would also need the address script to NOT send the value 'Airport' to anything.
is this clear enough, please help me, i learn fast!
oh yeah, here is the page code so you can have a look, ive tried to keep things as simple as possible
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form</title>
<link rel="stylesheet" type="text/css" href="actstyle.css" media="all" />
<link rel="stylesheet" type="text/css" href="ezcalendar.css" />
<script type="text/javascript" src="ezcalendar.js"></script>
</head>
<body>
<div id="wrap" class="clearfix">
<br /><br />
<form name="bookingenquiryform" method="post" action="blob.asp">
<table width="748">
<tr><td align="left" valign="top" width="374">
<p class="mainpage">Passenger:</p>
<p><select class="droppy" id="passenger" name="passenger" style="margin-left:20px;width:150px;">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
<option value="Jelly">Jelly</option>
</select>
<table>
<tr>
<td>
<p class="mainpage"><input type="radio" value="Airport to Home" name="direction" id="airportToHome" onclick="airport2home()" />
<label for="airportToHome">Airport to Home</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="Home to Airport" name="direction" id="homeToAirport" onclick="home2airport()" />
<label for="homeToAirport">Home to Airport</label></p>
</td>
</tr>
<tr>
<td>
<p class="mainpage"><input type="radio" value="Airport to 123 Office Address, London" name="direction" id="airportToOffice" onclick="airport2office()" />
<label for="airportToOffice">Airport to Office</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="123 Office Address, London to Airport" name="direction" id="officeToAirport" onclick="office2airport()" />
<label for="officeToAirport">Office to Airport</label></p>
</td>
</tr>
<tr>
<td>
<p class="mainpage"><input type="radio" value="123 Office Address, London to Home" name="direction" id="officeToHome" onclick="office2home()" />
<label for="officeToHome">Office to Home</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="Home to 123 Office Address, London" name="direction" id="homeToOffice" onclick="home2office()" />
<label for="homeToOffice">Home to Office</label></p>
</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="374">
<p class="mainpage">From:</p>
<p><select class="droppy" id="fromairport" name="fromairport" style="margin-left:20px;width:275px;">
<option value="">...</option>
<option value="Heathrow Airport">Heathrow Airport</option>
<option value="Heathrow Airport - Terminal 1">Heathrow Airport - Terminal 1</option>
<option value="Heathrow Airport - Terminal 2">Heathrow Airport - Terminal 2</option>
<option value="Heathrow Airport - Terminal 3">Heathrow Airport - Terminal 3</option>
<option value="Heathrow Airport - Terminal 4">Heathrow Airport - Terminal 4</option>
<option value="Heathrow Airport - Terminal 5">Heathrow Airport - Terminal 5</option>
<option value="Gatwick Airport">Gatwick Airport</option>
<option value="Gatwick Airport - North Terminal">Gatwick Airport - North Terminal</option>
<option value="Gatwick Airport - South Terminal">Gatwick Airport - South Terminal</option>
</select></p>
<p><textarea style="margin-left:20px;width:275px;" class="long" id="from" name="from" rows="3"></textarea></p>
<p class="mainpage">To:</p>
<p><select class="droppy" id="toairport" name="toairport" style="margin-left:20px;width:275px;">
<option value="">...</option>
<option value="Heathrow Airport">Heathrow Airport</option>
<option value="Heathrow Airport - Terminal 1">Heathrow Airport - Terminal 1</option>
<option value="Heathrow Airport - Terminal 2">Heathrow Airport - Terminal 2</option>
<option value="Heathrow Airport - Terminal 3">Heathrow Airport - Terminal 3</option>
<option value="Heathrow Airport - Terminal 4">Heathrow Airport - Terminal 4</option>
<option value="Heathrow Airport - Terminal 5">Heathrow Airport - Terminal 5</option>
<option value="Gatwick Airport">Gatwick Airport</option>
<option value="Gatwick Airport - North Terminal">Gatwick Airport - North Terminal</option>
<option value="Gatwick Airport - South Terminal">Gatwick Airport - South Terminal</option>
</select></p>
<p><textarea style="margin-left:20px;width:275px;" class="long" id="goingto" name="goingto" rows="3"></textarea></p>
<br />
</td>
</tr>
</table>
</form>
<br /><br />
</div>
<script>
var address = [
'',
'1 Jimmy Street',
'1 Jonny Street',
'1 Jelly Street'
];
function updateBooking() {
var passenger = document.getElementById('passenger');
var direction = this.value.split(" to ");
var passengerIndex = passenger.selectedIndex;
if (direction[0] === 'Home') {
direction[0] = address[passengerIndex];
}
if (direction[1] === 'Home') {
direction[1] = address[passengerIndex];
}
document.getElementById('from').value = direction[0];
document.getElementById('goingto').value = direction[1];
}
function airport2home () {
document.getElementById('from').style.display="none";
document.getElementById('from').value='';
document.getElementById('toairport').style.display="none";
document.getElementById('toairport').value='';
document.getElementById('fromairport').style.display="inline";
document.getElementById('goingto').style.display="inline";
}
function home2airport () {
document.getElementById('goingto').style.display="none";
document.getElementById('goingto').value='';
document.getElementById('fromairport').style.display="none";
document.getElementById('fromairport').value='';
document.getElementById('from').style.display="inline";
document.getElementById('toairport').style.display="inline";
}
function airport2office () {
document.getElementById('from').style.display="none";
document.getElementById('from').value='';
document.getElementById('toairport').style.display="none";
document.getElementById('toairport').value='';
document.getElementById('fromairport').style.display="inline";
document.getElementById('goingto').style.display="inline";
}
function office2airport () {
document.getElementById('goingto').style.display="none";
document.getElementById('goingto').value='';
document.getElementById('fromairport').style.display="none";
document.getElementById('fromairport').value='';
document.getElementById('from').style.display="inline";
document.getElementById('toairport').style.display="inline";
}
function office2home () {
document.getElementById('fromairport').style.display="none";
document.getElementById('from').value='';
document.getElementById('toairport').style.display="none";
document.getElementById('toairport').value='';
document.getElementById('from').style.display="inline";
document.getElementById('goingto').style.display="inline";
}
function home2office () {
document.getElementById('fromairport').style.display="none";
document.getElementById('fromairport').value='';
document.getElementById('toairport').style.display="none";
document.getElementById('toairport').value='';
document.getElementById('from').style.display="inline";
document.getElementById('goingto').style.display="inline";
}
document.getElementById('officeToHome').onclick = updateBooking;
document.getElementById('homeToOffice').onclick = updateBooking;
document.getElementById('officeToAirport').onclick = updateBooking;
document.getElementById('airportToOffice').onclick = updateBooking;
document.getElementById('airportToHome').onclick = updateBooking;
document.getElementById('homeToAirport').onclick = updateBooking;
</script>
</body>
</html>