Form option list adding a 2nd option based upon the first.

mike.a.rea

Say that I have a form with a drop down list box. This list will set a
value for a data field (for lack of a better word) say this is called
test1.

This is what I have for my basic form.
form name="form1" method="post" action="">
<select name="test1" id="test1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>

Now I want to set a second data field call it test2 based upon the
value assigned to test1 form the list box.

Can I do this? I figured if I could it would be with javascript, but
not sure how to do so.
Thanks for any help.

UnaCoder

Is the second data field another form input?

you could setup something like this:
<script>
function test1_changed() {
getElementById("test2").value = "Selected " +
getElementById("test1").value;
}
</script>
< form name="form1" method="post" action="">
<select id="test1" onchange="test1_changed();">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" id="test2" value="No Selection">
<input type="submit" name="Submit" value="Submit">
</form>

The value in the text box named test2 will change to say "Selected #"
# being the value of the item selected in test1.

UnaCoder

that should be document.getElementById by the way =)

mike.a.rea

Ok, but I could have more then 2 options here.

Also lets say that I want test2 = "Red" if test1=1, test2 = "Blue" if
test1=2, test2 = "Green" if test1=3, etc....

so what would you think if I made the function test1_changed()

if (test1.value == "1") {
document.getElementById("test2").value ="Red" ;}
else if (test2.value=="2") { ..........

Also not that it really matters but the text element for test2 would be
hidden, it would be used more to pass data off that the user doesnt
need to see.

UnaCoder

Yeah of course you can do that. I would probablly use switch-case
insted of if-then-else-if-then....

mike

Ok, I got it with your assistance.. Thanks.

For anyone else who needs this answer, here is what I did and it
worked.

<script language="javascript">
function test1_changed() {
if (document.getElementById("test1").value == "1") {
document.getElementById("test2").value ="Red";}
else {if (document.getElementById("test1").value == "2") {
document.getElementById("test2").value ="Blue";}
else {document.getElementById("test2").value ="Green";}}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<select id="test1" onchange="test1_changed();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="test2" >
<input type="submit" name="Submit" value="Submit">
</form>

</body>
</html>

UnaCoder

That would look a lot less messy if you use switch:

function test1_changed() {
var idTest1 = document.getElementById("test2");

switch (document.getElementById("test1").value) {
case 1:
idTest1.value = "Red";
break;
case 2:
idTest1.value = "Blue";
break;
default:
idTest1.value = "Green";
}
}

RobG

UnaCoder wrote:

That would look a lot less messy if you use switch:

function test1_changed() {
var idTest1 = document.getElementById("test2");

switch (document.getElementById("test1").value) {
case 1:
idTest1.value = "Red";
break;
case 2:
idTest1.value = "Blue";
break;
default:
idTest1.value = "Green";
}
}

A bit confusing to hold a reference to 'test2' to a variable called
'idTest1', but maybe that's just me... :-)

Try:

function test1_changed() {
var mapAr = { 1:'Red', 2:'Blue', 3:'Green'};
var a = document.getElementById("test1");
var b = document.getElementById("test2");
if ( a && b && (a.value && a.value in mapAr) ){
b.value = mapAr[a.value];
}
}

--
Rob

Form option list adding a 2nd option based upon the first.

This discussion thread is closed

Similar topics