Javascript: how to insert value into text input fields from a drop down menu

Question

I am pretty new to javascript so I hope someone here can help me out with this little task.

I currently have two input text fields that I need to be populated with text after selecting an option from a drop down menu.

For example...

I have a select field that looks like this:

<select id="select_2" onchange="insertProduct(2);">

And within that select I have options that look like this:

<option id="cdrom001" title="my cdrom">cdrom001 - my cdrom</option>
<option id="DVD-ABUG" title="A Bug's Life">DVD-ABUG - A Bug's Life</option>
<option id="DVD-BELOVED" title="Beloved">DVD-BELOVED - Beloved</option>
....

What I want to happen, is when I select an option from that drop down list, I want my text input field #1 to be populated with the option id (eg. DVD-ABUG) and I want my text input field #2 to be populated with the option title (eg. A Bug's Life).

Here is the code for my two text input fields:

<input type="text" name="model[]" id="model_2">
<input type="text" name="product[]" id="product_2">

I have this much written of the function that will be required to do this...

function insertProduct(id){ 
// code goes here
}

As you can see, I don't have much. :o)

Can someone please help me with the function that can do this?

Thanks so much!

DaveS · Accepted Answer · 2010-01-25 03:45:44Z

1

Change this line:

<select id="select_2" onchange="insertProduct(2);">

to this:

<select id="select_0" onchange="insertProduct(this, 0);">

and use this function:

function insertProduct(select, row){ 
    var model = "model_";
    var product = "product_";
    document.getElementById(model + row).value = select.options[select.selectedIndex].id;
    document.getElementById(product + row).value = select.options[select.selectedIndex].title;
}

edited Jan 25, 2010 at 3:45

answered Jan 25, 2010 at 2:41

DaveS

3,2941 gold badge23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

lewisqic Over a year ago

Thanks, that works great. However, it's not dynamic in the fact that I can't use it in a loop because the model_2 and product_2 need to change to model_3, product_3 etc... any idea how to work around that?

DaveS Over a year ago

add var model = "model_"; and var product = "product_"; to the top of the function. Then put the two lines from above (the document.getElement... ones) in a for loop. Then change the parameters of the getElementById calls, so that "model_2" becomes "model + (i + 1)". I'll edit my original answer to reflect this.

lewisqic Over a year ago

Thanks for the reply... I added the two variables to the function but not quite sure how to construct the for look, can you help me please?

lewisqic Over a year ago

well there are two fields per row. the number of rows is dynamic, just depends upon how many the user wants.

lewisqic Over a year ago

and each row will have the same drop down menu next to it.

|

Xinus · Accepted Answer · 2010-01-25 02:33:28Z

0

Here is what you are looking for Just call it on onchange instead of button click

http://www.mredkj.com/tutorials/tutorial002.html

answered Jan 25, 2010 at 2:33

Xinus

30.7k35 gold badges123 silver badges168 bronze badges

Collectives™ on Stack Overflow

Javascript: how to insert value into text input fields from a drop down menu

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related