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!

Register Log in
  • 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

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>
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Or try:
Code: 
<select class="droppy" id="passenger" name="passenger" style="margin-left:20px;width:150px;" onchange="var passengername = this[this.selectedIndex].text;">

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
268
Rayj0000
Rayj0000
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
144
rogerte
rogerte
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
84
HansMaulwurf
HansMaulwurf
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
223
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top