467,075 Members | 1,089 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,075 developers. It's quick & easy.

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

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.

Feb 16 '06 #1
  • viewed: 1151
Share:
7 Replies
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.

Feb 16 '06 #2
that should be document.getElementById by the way =)

Feb 16 '06 #3
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.

Feb 16 '06 #4
Yeah of course you can do that. I would probablly use switch-case
insted of if-then-else-if-then....

Feb 16 '06 #5
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>

Feb 16 '06 #6
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";
}
}

Feb 16 '06 #7
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
Feb 17 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by sentinel | last post: by
reply views Thread by Steve Edwards | last post: by
2 posts views Thread by Clayton Hamilton | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.