Javascript - Populate 2 textbox with 1 select list

Question

I need to populate 2 different text boxes when something is selected in the dropdown box.

From the fiddle, i can be do it with one.

Sorry, let me clarify a little more. This dropdown list actually is the person's LONG NAME. I'm trying to populate a "nickname" and "contact number" textbox when his name is selected.

Look at this demo which I now have 2 textbox in there. In my database, I have a record of everyone's Fullname, nickname, and contact number. It's up to me how I create a select list, but I only want to select his full name to show the nickname and contact number on 2 seperate boxes..

?? Why not just add code to that event handler to update another input field? What's the problem? — Pointy, Jan 30 '13 at 15:59
I mean you've got code right there to update a textarea already. What is it that's not working about simply using that approach on another input field? — Pointy, Jan 30 '13 at 16:12
because textfield value = selected value I don't know where to populate with another value. is Array allwed? — Emerson F, Jan 30 '13 at 16:21

score 1 · Answer 1 · answered Jan 30 '13 at 16:01

Sorry but your example has only one texarea...

However if I don't' have misunderstood your question you can simply do that:

var mytextbox = document.getElementById('mytext');
var mytextbox2 = document.getElementById('mytext2');

var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function(){

   mytextbox.value = mytextbox.value  + this.value;
   mytextbox2.value = mytextbox2.value  + this.value;
}

score 1 · Answer 2 · answered Jan 30 '13 at 16:35

<textarea id="mytext"></textarea>
<textarea id="mytext2"></textarea>
<select id="dropdown">
<option value="">None</option>
<option value="contactnumber1">text1</option>
<option value="contactnumber2">text2</option>
<option value="contactnumber3">text3</option>
<option value="contactnumber4">text4</option>
</select>

var mytextbox = document.getElementById('mytext');
var mytextbox2 = document.getElementById('mytext2');
var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function () {
mytextbox.value = mydropdown.options[this.selectedIndex].text;
mytextbox2.value = mydropdown.options[this.selectedIndex].value;
};

quickLearner · Answer 3 · 2013-01-30T16:13:35.510

0

do you mean, you want to append selection each time some body selects item from drop down? I do not see two text boxes in your fiddle that is why I am asking...

if you want unique values selected then..

var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');
var strValue =  new String();
mydropdown.onchange = function(){
if(strValue.indexOf(this.value)<=0){
   if(strValue!="")
{
    strValue += "," + this.value;
}
else
{
    strValue = this.value
}
}
mytextbox.value = strValue;
}

edited Jan 30 '13 at 16:13

answered Jan 30 '13 at 16:01

quickLearner

141
2
12

Sorry, let me clarify a little more. This dropdown list actually is the person's LONG NAME. I'm trying to populate a "nickname" and "contact number" textbox when his name is selected. – Emerson F Jan 30 '13 at 16:12
where are the contact number's coming from (for each long name)? – quickLearner Jan 30 '13 at 16:15

Daniel Beacham · Answer 4 · 2013-01-30T16:20:38.470

0

So you are wanting two values to be populated by one tag. With that said, what if you just put data attributes in the option tag? data-contactNumber data-longName

<select>  
<option value="x" data-contactNumber = "yyyy" data-longName="zzzz">  
.....
</select>

Then you can just assign the selected option text boxes the individual data attrs??

edited Jan 30 '13 at 16:20

answered Jan 30 '13 at 16:01

Daniel Beacham

103
6

I can actually do this?! I'm going to try! – Emerson F Jan 30 '13 at 16:32
wait, how do I get the data from it? – Emerson F Jan 30 '13 at 16:34
I found my ans here! http://stackoverflow.com/questions/4564659/adding-additional-data-to-select-options-using-jquery – Emerson F Jan 30 '13 at 16:35
Data ATTRS are a wonderful thing and should do exactly what you want. Glad you found the other link as well! – Daniel Beacham Jan 30 '13 at 16:56

Javascript - Populate 2 textbox with 1 select list

4 Answers4