Fill inputs with select menu's option values?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Fill inputs with select menu's option values?

Post by JAB Creations »

I have a simple goal though it requires a JavaScript for loop which I still pretty much totally suck at. All I want to do is have each option's value added to an input text field.

So manually it would look something like this...

Code: Select all

document.getElementById('val_1').value =  document.getElementById('my_select')[1].value;
Here is what I was messing around with...

Code: Select all

<script>
function my_function() {
for (i=0; document.getElementById('my_select')[i++];)
document.getElementById('val_'+i++).value=document.getElementById('my_select')[i++];
}
</script>
 
<select id="my_select" onchange="my_function">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
 
<input id="val_1" type="text" value="" />
<input id="val_2" type="text" value="" />
<input id="val_3" type="text" value="" />
<input id="val_4" type="text" value="" />
<input id="val_5" type="text" value="" />
<input id="val_6" type="text" value="" />
<input id="val_7" type="text" value="" />
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Re: Fill inputs with select menu's option values?

Post by arjan.top »

I'm not shure I understand what you want to do ...

Code: Select all

 
for(element in document.getElementById('my_select')){
document.getElementById('val_1').value += element.value;
}
 
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Fill inputs with select menu's option values?

Post by JAB Creations »

The first select option's value would be set as 'val_1' value.
The second select option's value would be set as 'val_2' value.
The third select option's value would be set as 'val_3' value.
The fourth select option's value would be set as 'val_4' value.

Simple replication, only I just can't figure out for loops in JavaScript (but I understand them in PHP). :|
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Re: Fill inputs with select menu's option values?

Post by arjan.top »

Code: Select all

 
for(var i=0; i<document.getElementById('my_select').length; i++){
document.getElementById('val_' + i).value = document.getElementById('my_select')[i].value;
}
 
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Fill inputs with select menu's option values?

Post by JAB Creations »

Ok we're almost there!

I set the function to trigger on an onload event.

It works almost perfectly only...
For value 1 val_' + i = 2
For value 2 val_' + i = 3
For value 3 val_' + i = 4
For value 4 val_' + i = 5
...etc, it should be...
For value 1 val_' + i = 1...but obviously not using that code/math?

To achieve this I change i's default value from 0 to 1...when I change it back nothing works.

Here is the works but not in the desired way working code...

Code: Select all

<html><head><script>function my_function() { for(var i=1; i<document.getElementById('my_select').length; i++){document.getElementById('val_' + i).value = document.getElementById('my_select')[i].value;}}function start() { my_function();} window.onload = start;</script></head> <body> <select id="my_select"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option></select><br /><input id="val_1" type="text" value="" /><input id="val_2" type="text" value="" /><input id="val_3" type="text" value="" /><input id="val_4" type="text" value="" /><input id="val_5" type="text" value="" /><input id="val_6" type="text" value="" /><input id="val_7" type="text" value="" /></body></html>
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Re: Fill inputs with select menu's option values?

Post by arjan.top »

Code: Select all

 
for(var i=0; i<document.getElementById('my_select').length; i++){
document.getElementById('val_' + (i+1)).value = document.getElementById('my_select')[i].value;
}
 
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Fill inputs with select menu's option values?

Post by JAB Creations »

Ah-ha! Awesome I learned something new, even though I'm not sure how to correctly reference it. I figured I needed to execute math and I did attempt to add +1 to the i variable though I was not aware I needed to use parenthesis to do so.

How do you correctly reference the terminology of using the child parenthesis here...?

Code: Select all

document.getElementById('val_' + (i+1))
Thanks a ton Arjan! :mrgreen:
Post Reply