Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Form option list adding a 2nd option based upon the first. (http://www.velocityreviews.com/forums/t923039-form-option-list-adding-a-2nd-option-based-upon-the-first.html)

mike.a.rea@gmail.com 02-16-2006 05:24 PM

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.


UnaCoder 02-16-2006 06:10 PM

Re: Form option list adding a 2nd option based upon the first.
 
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 02-16-2006 06:24 PM

Re: Form option list adding a 2nd option based upon the first.
 
that should be document.getElementById by the way =)


mike.a.rea@gmail.com 02-16-2006 06:50 PM

Re: Form option list adding a 2nd option based upon the first.
 
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 02-16-2006 07:31 PM

Re: Form option list adding a 2nd option based upon the first.
 
Yeah of course you can do that. I would probablly use switch-case
insted of if-then-else-if-then....


mike 02-16-2006 07:44 PM

Re: Form option list adding a 2nd option based upon the first.
 
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 02-16-2006 09:03 PM

Re: Form option list adding a 2nd option based upon the first.
 
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 02-17-2006 02:13 AM

Re: Form option list adding a 2nd option based upon the first.
 
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


All times are GMT. The time now is 11:55 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.