basic if value, form drop down.

**antonyx** · Apr 19, 2008 07:45

Code:

<select id="airport" name="arport" onclick="this.form.from.value = this.form.airport.value;"

i want the from value to be the airport value only if the airport value is not null

i would imagine it being something like this but im not sure of the syntax

Code:

<select id="airport" name="arport" onclick="if this.form.airport.value !=" " then this.form.from.value = this.form.airport.value;"

**antonyx** · Apr 19, 2008 08:02

infact, i have just spotted another problem.. i have been developing the form i was helped build in my last post..

you can see the form here..

http://www.londonheathrowcars.com/xtestx.htm

basically when the user choose an airport from the airport drop down menu, that value has to go into the corresponding from or to textarea.

i know that i can add the following to my airport drop down..

Code:

onclick="this.form.from.value = this.form.airport.value;"

and also

Code:

onclick="this.form.to.value = this.form.airport.value;"

basically i need the airport drop down to know beforehand which textarea to send it's value to.

this would be something like..

if radio selection= 'airport to x' then airport value goes to the from textarea

if radio selection= 'x to airport' then airport value goes to the to textarea

i hope this is clear.. so this would need to be combined with the post above this..

if airport selection = not null then send value to from or to textarea (depending on which radio is selected)

thanks in advance for any assistance.

here is the page code..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<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="scripts\ezcalendar.css" />
<script type="text/javascript" src="scripts\ezcalendar.js"></script>


</head>

<body>

<div id="wrap" class="clearfix">


<h1 class="mid">Booking Form</h1>
<p class="mainpage">Welcome to the booking page.</p>
<br /><br />
<form name="bookingenquiryform" method="post">

<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>
</p>

<br /> 

<table>
<tr>
<td>
<p class="mainpage"><input type="radio" value="Airport to Home" name="direction" id="airportToHome" />
   <label for="airportToHome">Airport to Home</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="Home to Airport" name="direction" id="homeToAirport" />
   <label for="homeToAirport">Home to Airport</label></p>
</td>
</tr>

<tr>
<td>
<p class="mainpage"><input type="radio" value="Airport to Office" name="direction" id="airportToOffice" />
   <label for="airportToOffice">Airport to Office</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="Office to Airport" name="direction" id="officeToAirport" />
   <label for="officeToAirport">Office to Airport</label></p>
</td>
</tr>

<tr>
<td>
<p class="mainpage"><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
   <label for="officeToHome">Office to Home</label></p>
</td>
<td>
<p class="mainpage"><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
   <label for="homeToOffice">Home to Office</label></p>
</td>
</tr>
</table>

<br />
<p class="mainpage">From:</p>
<p><textarea style="margin-left:20px;" class="long" id="from" name="from" cols="45" rows="3"></textarea></p>

<p class="mainpage">To:</p>
<p><textarea style="margin-left:20px;" class="long" id="to" name="to" cols="45" rows="3"></textarea></p>
<br />
</td>

<td align="left" valign="top" width="374">

<p class="mainpage">Pickup date:</p>

<p class="mainpage"><input style="background-color:#EBEBEB;margin-top:10px;width:100px;" name="date" id="date" type="text" size="10" maxlength="10" value="" />
<a href="javascript: showCalendar('date')"><u>Choose a date</u></a></p>
<br />

<p class="mainpage">Airport:</p>

<p><select class="droppy" id="airport" name="arport" style="margin-left:20px;width:200px;">
<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 class="mainpage">Flight no:</p>
<p><input style="margin-left:20px;width:100px;" type="text" class="txtbox" id="flightno" name="flightno" /></p>
<p class="mainpage">Flight arrival time:</p>
<p><select id="enqhour" name="enqhour" class="droppy" style="margin-left:20px;width:100px;">
		<option value="">Hour</option>

	<option value="01">01 AM</option>
	<option value="02">02 AM</option>
	<option value="03">03 AM</option>
	<option value="04">04 AM</option>

	<option value="05">05 AM</option>
	<option value="06">06 AM</option>

	<option value="07">07 AM</option>
	<option value="08">08 AM</option>
	<option value="09">09 AM</option>
	<option value="10">10 AM</option>

	<option value="11">11 AM</option>
	<option value="12">Midday</option>

	<option value="13">01 PM</option>
	<option value="14">02 PM</option>
	<option value="15">03 PM</option>
	<option value="16">04 PM</option>

	<option value="17">05 PM</option>
	<option value="18">06 PM</option>

	<option value="19">07 PM</option>
	<option value="20">08 PM</option>
	<option value="21">09 PM</option>
	<option value="22">10 PM</option>

	<option value="23">11 PM</option>
	<option value="24">Midnight</option></select>

	<select class="droppy" id="enqminutes" name="enqminutes" style="width:100px;">
	<option value="">Minute</option>
	<option value="00">00</option>
	<option value="05">05</option>

	<option value="10">10</option>
	<option value="15">15</option>

	<option value="20">20</option>
	<option value="25">25</option>
	<option value="30">30</option>
<option value="35">35</option>

<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>

<option value="55">55</option></select></p>


</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('to').value =  direction[1];

}

document.getElementById('officeToHome').onchange = updateBooking;
document.getElementById('homeToOffice').onchange = updateBooking;

document.getElementById('officeToAirport').onchange = updateBooking;
document.getElementById('airportToOffice').onchange = updateBooking;

document.getElementById('airportToHome').onchange = updateBooking;
document.getElementById('homeToAirport').onchange = updateBooking;
</script>

</body>
 
</html>

**paul_wilkins** · Apr 19, 2008 16:42

Something like this is very difficult to develop in a step-by-step manner, when the desired end result is unknown.

At every step there are multiple ways to achieve the objective, some of which make future work harder to do. Only by knowing the whole of the final objective can a successful plan be put into place.

This is typically done by creating the whole form so that it can be successfully submitted without javascript. Only after it works from the server-side, should javascript then be used to improve the user experience.

Any reliance on javascript for being the only means to process the form is ultimately foolhardy and bad for business.

**antonyx** · Apr 20, 2008 04:00

you're right, im trying to be too clever.

thanks

**antonyx** · Apr 20, 2008 04:11

i was just testing the page as it is on ie7 and there are problems, it works fine in firefox

in ie7, when you choose a passenger and hit a radio button.. the first time nothing displays..

also the home and office values are swapped.. any idea why?

**antonyx** · Apr 20, 2008 04:12

everything seems to be swapping randomnly in ie7.. have a look

http://londonheathrowcars.com/xtestx.htm

**paul_wilkins** · Apr 20, 2008 05:26

It seems that IE has trouble with the onchage event. Try using the onclick event instead.

**antonyx** · Apr 20, 2008 08:31

yes, that has done the trick, thanks again.

User Tag List

Thread: basic if value, form drop down.

Thread Tools

Display

basic if value, form drop down.

Bookmarks

Bookmarks

Posting Permissions