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!

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