Solved

Populate an html textarea from a drop down list

Posted on 2012-04-06
7
507 Views
Last Modified: 2012-04-06
Hi,

I have an html drop down list, and need to have a textarea populated with the choice from the drop down list.

Thanks for any help.
0
Comment
Question by:taborrg
  • 4
  • 2
7 Comments
 
LVL 6

Expert Comment

by:Joshua1909
ID: 37815587
Hi,

This will work, but I can't take credit for the code:

HTML
<textarea id="mytext"></textarea>

<select id="dropdown">
    <option value="">None</option>
    <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
    <option value="text4">text4</option>
</select>

Open in new window


Javascript
<script type="text/javascript">
    var mytextbox = document.getElementById('mytext');
    var mydropdown = document.getElementById('dropdown');

    mydropdown.onchange = function(){
          mytextbox.value = mytextbox.value  + this.value; //to appened
         //mytextbox.innerHTML = this.value;
    }
</script>

Open in new window


Links:
http://jsfiddle.net/kjy112/kchRh/
http://stackoverflow.com/questions/5263839/how-to-fill-in-a-text-field-with-drop-down-selection

Cheers,
Josh
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37815595
Take a look at this jsfiddle
.
$("#source").change(function() {
    $("#target").val( $("option:selected", this).text() );
});

Open in new window

0
 
LVL 1

Author Comment

by:taborrg
ID: 37815598
Joshua1909 - Looks promising, I will try this.

Proculopsis - I don't understand this.  Where and how would it be used?

Thanks!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:taborrg
ID: 37815665
Joshua1909,

I copied and pasted all the code, and it doesn't put anything into the textarea.
0
 
LVL 1

Author Comment

by:taborrg
ID: 37815692
0
 
LVL 6

Accepted Solution

by:
Joshua1909 earned 500 total points
ID: 37815693
Hi tabborg,

Can you paste the final code you're using.

I've attached a working html file with the code in it.


Cheers,
Josh
textarea.html
0
 
LVL 1

Author Comment

by:taborrg
ID: 37815705
Hey Josh,

Your code works fine.  My problem may have had to do with how I placed the javascript - the code that's working is in a function.

Your answer got me to the solution.

Thanks.


The code:


function addOption(x) {

sOption=document.getElementById('textBox1').value;
sOptions=sOption.split("\n");
 if (sOption == '') {document.getElementById('textBox1').value=x+"\n";}
 else {  
  if (sOptions.length > 1) {document.getElementById('textBox1').value=sOption+x+"\n";}
  else {document.getElementById('textBox1').value=sOption+"\n"+x+"\n";}
 }
document.getElementById('textBox1').focus();
}


Source:

http://www.tek-tips.com/viewthread.cfm?qid=1071319
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
formvalidation.io validate form on class click 4 35
Date on a table 16 33
ModalPopup  question 22 37
How to check or uncheck a checkbox using the id of the checkbox 2 16
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question