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.

Feb 16 '06 #1

Subscribe Post Reply

1346

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.

Feb 16 '06 #2

UnaCoder

that should be document.getElementById by the way =)

Feb 16 '06 #3

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.

Feb 16 '06 #4

UnaCoder

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

Feb 16 '06 #5

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>

Feb 16 '06 #6

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";
}
}

Feb 16 '06 #7

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

Feb 17 '06 #8

by: sentinel | last post by:

Hi, Wonder if anyone can help with this problem: I am using an app with several pages, using a session to track vars between the pages, and using an image map to re-direct back and forwards...

PHP

Passing Data To Multi Use Form

by: Steve Edwards | last post by:

I am working on a site where I need to create forms to both add and edit information for a group of products. I would like to use the same form for both adding new and edit data for existing...

PHP

javascript form validation which just doesnt work with my ASP code. Can any one help me out please.

by: x muzuo | last post by:

Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...

Javascript

Appending option items in dropdown in parent window from dropdown in Child window in IE

by: Bostonasian | last post by:

I am trying to append options to dropdown in parent window from option items in child window. In parent window, I have following code: <script language="javascript"> function...

Javascript

PLease Help: Pulling up a particular record using a form

by: Skully Matjas | last post by:

I am using the following code (created by the wizard) to allow to bring my form to a particular entery. But when I edit the entery (ex: put new information into a blank cell), it puts that record...

Microsoft Access / VBA

Adding rows to a DataGrid in a web form

by: Clayton Hamilton | last post by:

I have a DataGrid on a webform bound to a Datasource and can successfully use <ItemTemplate> to create edit/update/cancel functionality for user maintenance of data. I use separate logic to delete...

C# / C Sharp

acces object vars form event handler (how?)

by: Ralph | last post by:

Hi I don't understand why it's not working: function schedule(imTop){ this.tdImagesTop = imTop; } schedule.prototype.selectEl = function() { alert(this.tdImagesTop);

Javascript

Filter sub form from the main form.

by: mjworks2009 | last post by:

I'm creatig a data base and in my front page i have 3 sub forms and 3 buttons for the sub forms to activate or not. 1. Subform1 is where all the current list of the patients being admitted for...

Microsoft Access / VBA

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

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

Similar topics