Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 form scripts, work independantly but not together

Status
Not open for further replies.

seoWebGuy

Programmer
May 13, 2008
2
GB
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.

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>
 
From what I can tell, the problem is with the updateBooking function.

I dont know how you plan to use this in the future, but maybe this will help.

First of all, change the drop down code to this:

<select class="droppy" id="passenger" name="passenger" style="margin-left:20px;width:150px;">

<option value="">...</option>
<option value="1 Jimmy Street">Jimmy</option>
<option value="1 Jonny Street">Jonny</option>
<option value="1 Jelly Street">Jelly</option>


</select>

Get rid of the address array and the updateBooking function.

In your airport2home function, add this:

document.getElementById('goingto').value = document.getElementById('passenger').value;

Basically, that will hide the items you want, and place the address in the goingto textarea.

Use that as an example to finish off the rest of them.

Let me know if that doesnt make sense, or if you need more help.

gkc
 
hi, i understand what you have done..

the problem with that however is that when the form is submitted i would need the passenger name,

doing what you have said, would i need to add some script to my code that processes the form such as


if passenger = 1 jimmy.. then passengername = "Jimmy"



would that be ok do you think?
 
Or try:
Code:
<select class="droppy" id="passenger" name="passenger" style="margin-left:20px;width:150px;" onchange="var passengername = this[this.selectedIndex].text;">

Lee
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top