Solved

Populate an html textarea from a drop down list

Posted on 2012-04-06
7
494 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

939 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now