very basic form prefill command needed

**antonyx** · Apr 15, 2008 14:38

hello, i am trying to prefill a textarea when a radio button is clicked. the value of the textarea will depend upon the value of a drop down.

here is my form.
http://www.londonheathrowcars.com/testform2.htm

what i am asking for is one very basic javascript command that does the following:

Code:

when direction.radio is clicked do

if office to home is clicked and passenger="jimmy" then from.value="office" and to.value="jimmy home"

if office to home is clicked and passenger="jonny" then from.value="office" and to.value="jonny home"

end.

that's it. once i see the syntax for doing this i can play around with it no problem.

i hope someone can help

thanks..

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>

</head>

<h1>Booking Form</h1>

<p>Welcome to the booking page.</p>

<form name="bookingenquiryform" method="post">
<p>Passenger:</p>

<p><select id="passenger" name="passenger">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
</select>
</p>

<p><input type="radio" value="Office to Home" name="direction" />Office to Home</p>

<p>From:</p>

<p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>

<p>To:</p>

<p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>

<p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>

</form>

</body>

</html>

**paul_wilkins** · Apr 15, 2008 15:20

Normally you youldn't have jsut one radio button, and insead a checkbox, but I presume that you're going to add more radio buttons so I'll add another one in my example, but leave it unattached to any events at this stage.

We will use id attributes to target the option buttons, which are also useful in that you can use a label element around the text and target that text to the radio button.

Code html4strict:

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

So now, the radio buttons will select themself when people click on the text as well.

The updateBooking function would look something like this:

Code javascript:

function updateBooking() {
    var passenger = document.getElementById('passenger');
    var direction = this.value.split(' ');
	if (passenger.selectedIndex > 0) {
	    passenger = passenger.options[passenger.selectedIndex].value;
	    document.getElementById('from').value = direction[0];
	    document.getElementById('to').value =  passenger + ' ' + direction[2];
	}
}

And it's attached to the radio buttons with the following

Code javascript:

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

here's the test code in full

Code html4strict:

<!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>
 
</head>
 
<h1>Booking Form</h1>
 
<p>Welcome to the booking page.</p>
 
<form name="bookingenquiryform" method="post">
<p>Passenger:</p>
 
<p><select id="passenger" name="passenger">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
</select>
</p>
 
<p><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
   <label for="officeToHome">Office to Home</label></p>
<p><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
   <label for="homeToOffice">Home to Office</label></p>
 
<p>From:</p>
<p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
<p>To:</p>
<p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
 
<p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
</form>
 
<script>
function updateBooking() {
    var passenger = document.getElementById('passenger');
    var direction = this.value.split(' ');
	if (passenger.selectedIndex > 0) {
	    passenger = passenger.options[passenger.selectedIndex].value;
	    document.getElementById('from').value = direction[0];
	    document.getElementById('to').value =  passenger + ' ' + direction[2];
	}
}
document.getElementById('officeToHome').onchange = updateBooking;
document.getElementById('homeToOffice').onchange = updateBooking;
</script>
</body>
 
</html>

**JimmyP** · Apr 15, 2008 15:20

First you need to give the direction input an ID of "direction" so that this script will work...

(put script directly above </body>)

Code JavaScript:

<script type="text/javascript">
var DirectionRadio = document.getElementById("direction"); // Radio Button Element
var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
var FromTextArea = document.getElementById("from"); // 'from' textarea
var ToTextArea = document.getElementById("to"); // 'to' textarea
DirectionRadio.onclick = function() { // OnClick... This will happen
var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
var Passenger = PassengerOptions[PassengerIndex].value;
}
 
var ToText = Passenger+" home"; // Text to go in 'to' textarea
var FromText = "Office"; // Text to go in 'from' textarea
 
if(PassengerIndex!=0) { // i.e. if the select option is NOT the first one (...)
FromTextArea.value = FromText; // Puts the text in the 'from' textarea
ToTextArea.value = ToText; // Puts the text in the 'to' textarea
}
}
</script>

Edit:

LOL... Paul beat me...

His is better!

**paul_wilkins** · Apr 15, 2008 15:26

Thanks Jimmy, pleased to hear it

**antonyx** · Apr 15, 2008 15:36

this is really great, thanks so much for the quick response

i realise that strolling in and out and asking for code is not the right way to do it so i simplified my request as much as possible

i can certainly fiddle with what you gave me and i will let you know how im getting along

thanks again

**antonyx** · Apr 16, 2008 11:42

hi, rather then compiling the value based on the passenger name, what i wanted to do was actually place a pre-defind string in the text box

here is my situation.

there is one office address, lets call it.

1 Office Street, London

then each person in the drop down will have their own home address, lets say

Jimmy's address is

1 High Street, Jimmytown

and Jonny's address is

2 High Street, Jonnytown

i think in this case it would be better to create an array to hold the addresses and then just select from that array based on the passenger value..

does this make sense?

if it does please advise.

thanks

**paul_wilkins** · Apr 16, 2008 12:55

It does. Go ahead and give it a try.

**antonyx** · Apr 16, 2008 13:00

ahhhh.. ok give me half an hour or so i should have it..

**antonyx** · Apr 16, 2008 13:04

no hang on.. im confused.. your example definately uses the pax and direction to construct a value and jimmys uses a var that can be pre defined (var ToText =)

but i cant mix the two.. im confused

**antonyx** · Apr 16, 2008 13:07

sorry, i cant quite do it, what i was thinking of doing is something like..

Code:

<script type="text/javascript">
var DirectionRadio = document.getElementById("direction"); // Radio Button Element
var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
var FromTextArea = document.getElementById("from"); // 'from' textarea
var ToTextArea = document.getElementById("to"); // 'to' textarea
DirectionRadio.onclick = function() { // OnClick... This will happen
var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
var Passenger = PassengerOptions[PassengerIndex].value;
}
 
var JimmyAdd = "1 High Street, Jimmytown";
 
if(PassengerIndex!="Jimmy") { 
FromTextArea.value = "Office"; 
ToTextArea.value = JimmyAdd ; 
}
}
</script>

but the only prob is adding to this which radio was clicked..

**antonyx** · Apr 16, 2008 13:15

or this, which isnt working

Code:

<script type="text/javascript">
var DirectionRadio = document.getElementById("direction"); // Radio Button Element
var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
var FromTextArea = document.getElementById("from"); // 'from' textarea
var ToTextArea = document.getElementById("to"); // 'to' textarea
DirectionRadio.onclick = function() { // OnClick... This will happen
var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
var Passenger = PassengerOptions[PassengerIndex].value;
}
 
var JimmyAdd = "1 High Street, Jimmytown";
var JonnyAdd = "2 High Street, Jonnytown"; 

if(PassengerIndex="Jimmy") { 
FromTextArea.value = "Office"; 
ToTextArea.value = JimmyAdd ; 
}

if(PassengerIndex="Jonny") { 
FromTextArea.value = "Office"; 
ToTextArea.value = JonnyAdd ; 
}

}
</script>

**antonyx** · Apr 16, 2008 13:18

does this not working have something to do with passenger currently being a number??

**paul_wilkins** · Apr 16, 2008 15:24

Try this, following on from my code.

We'll store the addresses in an array, keeping the first entry empty so that they nicely match up with the passenger list.

Then we can get the passengerIndex and make good use of that.

Code javascript:

// address for each of the passengers
var address = [
    '', // no address for the top option "..."
    '1 High Street, Jimmytown',
    '2 High Street, Jonnytown'
];
var passengerIndex = passenger.selectedIndex;
if (passengerIndex > 0) {
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  address[passengerIndex];
}

**antonyx** · Apr 17, 2008 05:07

hi, im trying to do what you said.. am i on the right tracks because this is currently not working..

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>
 
</head>
 
<h1>Booking Form</h1>
 
<p>Welcome to the booking page.</p>
 
<form name="bookingenquiryform" method="post">
<p>Passenger:</p>
 
<p><select id="passenger" name="passenger">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
</select>
</p>
 
<p><input type="radio" value="Office to Home" name="direction" id="direction" />
   Office to Home</label></p>
<p><input type="radio" value="Home to Office" name="direction" id="direction" />
  Home to Office</label></p>
 
<p>From:</p>
<p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
<p>To:</p>
<p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
 
<p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
</form>
 
<script>
function updateBooking() {

var address = [
    '', // no address for the top option "..."
    '1 High Street, Jimmytown',
    '2 High Street, Jonnytown'
];
    
    var passengerIndex = passenger.selectedIndex;
if (passengerIndex > 0) {
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  address[passengerIndex];
}

}

</script>
</body>
 
</html>

**antonyx** · Apr 17, 2008 12:07

hello again, i am gettin somewhere..

it is very close..

u can see the page here..

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

Office will always be "Office"
Airport will always be "Airport"

Home will always be an address from the array.

what is working

the correct address for the chosen passenger is displaying in the textarea

what isn't working

1. the first part of the radio button value is always displaying in the 'from' textarea

2. the address from the array is always displaying in the 'to' textarea

what needs to be fixed

if Home to x is chosen, the array address needs to be in the 'from' textarea

if x to Home is chosen, the array address needs to be in the 'to' textarea

i appreciate your help and your patience reading my posts while i try to fix it.. any help now would go a long way.

thanks

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>
 
</head>
 
<h1>Booking Form</h1>
 
<p>Welcome to the booking page.</p>
 
<form name="bookingenquiryform" method="post">
<p>Passenger:</p>
 
<p><select id="passenger" name="passenger">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
</select>
</p>

 

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

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

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

<p>From:</p>
<p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
<p>To:</p>
<p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
 
<p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
</form>
 
<script>

var address = [
    '',
    '1 High Street, Jimmytown',
    '2 High Street, Jonnytown'
];

function updateBooking() {
    var passenger = document.getElementById('passenger');
    var direction = this.value.split(' ');
var passengerIndex = passenger.selectedIndex;
	if (passengerIndex > 0) {
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  address[passengerIndex];
}
}

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 17, 2008 13:46

Some of those requirements are confusing.

Can you please show what you want the from and to to look like for each of the six options.

**antonyx** · Apr 17, 2008 14:04

absolutely!

something like this..

Code:

if passenger="Jimmy" and radio="airport to home" then
from="airport" and to="1 High Street, Jimmytown"

if passenger="Jimmy" and radio="home to airport" then
from="1 High Street, Jimmytown" and to="airport"

if passenger="Jimmy" and radio="airport to office" then
from="airport" and to="office"

if passenger="Jimmy" and radio="office to airport" then
from="office" and to="airport"

if passenger="Jimmy" and radio="office to home" then
from="office" and to="1 High Street, Jimmytown"

if passenger="Jimmy" and radio="home to office" then
from="1 High Street, Jimmytown" and to="office"

Code:

if passenger="Jonny" and radio="airport to home" then
from="airport" and to="2 High Street, Jonnytown"

if passenger="Jonny" and radio="home to airport" then
from="2 High Street, Jonnytown" and to="airport"

if passenger="Jonny" and radio="airport to office" then
from="airport" and to="office"

if passenger="Jonny" and radio="office to airport" then
from="office" and to="airport"

if passenger="Jonny" and radio="office to home" then
from="office" and to="2 High Street, Jonnytown"

if passenger="Jonny" and radio="home to office" then
from="2 High Street, Jonnytown" and to="office"

**paul_wilkins** · Apr 17, 2008 14:09

So Airport and Office remain fixed, and Home gets replaced with the street address.

Code javascript:

if (direction[0] === 'Home') {
    direction[0] = address[passengerIndex];
}
if (direction[2] === 'Home') {
    direction[2] = address[passengerIndex];
}
document.getElementById('from').value = direction[0];
document.getElementById('to').value =  direction[2];

**antonyx** · Apr 17, 2008 14:18

YES, it is working.. here is the proof.. thank you..

refresh the page..

www.londonheathrowcars.com/page.htm

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>
 
</head>
 
<h1>Booking Form</h1>
 
<p>Welcome to the booking page.</p>
 
<form name="bookingenquiryform" method="post">
<p>Passenger:</p>
 
<p><select id="passenger" name="passenger">
<option value="">...</option>
<option value="Jimmy">Jimmy</option>
<option value="Jonny">Jonny</option>
</select>
</p>

 

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

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

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

<p>From:</p>
<p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
<p>To:</p>
<p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
 
<p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
</form>
 
<script>

var address = [
    '',
    '1 High Street, Jimmytown',
    '2 High Street, Jonnytown'
];

function updateBooking() {
    var passenger = document.getElementById('passenger');
    var direction = this.value.split(' ');
	var passengerIndex = passenger.selectedIndex;
	if (direction[0] === 'Home') {
    direction[0] = address[passengerIndex];
}
if (direction[2] === 'Home') {
    direction[2] = address[passengerIndex];
}
document.getElementById('from').value = direction[0];
document.getElementById('to').value =  direction[2];

}

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>

**antonyx** · Apr 17, 2008 15:34

hi.. just tinkering with things...

the 'Office' will be unchanging but it will be more than one word..

for example..

if the radio button was the following:

Code:

<p><input type="radio" value="Airport to Office Street, London, N1 7UI" name="direction" id="airportToOffice" />
   <label for="airportToOffice">Airport to Office</label></p>

currently the to textarea will simply display 'Office' instead of that full address..

is there a way that instead of using the first word (Office).. i can grab everything from the value that is that side of the 'to'

**paul_wilkins** · Apr 17, 2008 15:38

Yes, you can split it on " to " which will result in the following array
['Airport', 'Airport to Office Street, London, N1 7UI']

So you can then use [0] for the From section and [1] for the To section.

**antonyx** · Apr 17, 2008 15:44

yes, i seeee.. it works..

Code:

<script>

var address = [
    '',
    '22 Manor Road, Henley On Thames RG9 1LU',
	'Chimney Cottage, 74 Summers Road, Godalming GU7 3BE',
	'9 Danvers Drive, Church Crookham, Fleet, Hants, GU52 0YN',
	'64 Houblon Road, Richmond, TW10 6DE',
	'39 Sydney Steet, London, SW3 6PU',
	'29 Melliss Avenue, Richmond, TW9 4BS',
	'4 Upper Teddington Road, Hampton, KT1 4DY',
	'16 Warrick Deeping, Ottershaw, Chertsey, KT16 0NE'

];

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>

User Tag List

Thread: very basic form prefill command needed

Thread Tools

Display

very basic form prefill command needed

Bookmarks

Bookmarks

Posting Permissions