Solved

Insert value from dropdown into textarea onclick

Posted on 2009-05-15
8
277 Views
Last Modified: 2012-05-07
I have a form (see code snippet) that has a dropdown menu and a textarea. When someone selects something from the dropdown I want to insert it into the textarea.

How would I do this?
<form id="form1" action="" method="post">

	<select name="options">

		<option>Select a template</option>

		<option>Nobody at home</option>

		<option>Something else</option>

	</select>

	<textarea rows="15" cols="57" name="notes"></textarea><br />

	<input type="submit" value="">

</form>

Open in new window

0
Comment
Question by:synergiq
  • 4
  • 2
  • 2
8 Comments
 
LVL 2

Accepted Solution

by:
divstar earned 250 total points
Comment Utility
Try this javascript function.

The parameter dropdown is the id of the dropdown menu to be chosen from
The parameter textbox is the id of the textbox to be inserted into

In this example I have ran the function when the menu changes using the onchange attribute


...

<head>

<script type="text/javascript">

function setTextbox(dropdown,textbox)

{

	document.getElementById(textbox).value =      document.getElementById(dropdown).value;

}

</script>

</head>
 

<body>

<form id="form1" action="" method="post">

        <select name="options" id="options" onchange="setTextbox('options','notes');">

                <option>Select a template</option>

                <option>Nobody at home</option>

                <option>Something else</option>

        </select>

        <textarea rows="15" cols="57" name="notes" id="notes"></textarea><br />

        <input type="submit" value="Submit">

</form>

</body>

...

Open in new window

0
 
LVL 10

Assisted Solution

by:bugada
bugada earned 250 total points
Comment Utility
This may be done without changing your layout but by inserting a simple javascript fuinction in your head block
<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <title></title>

   <script type="text/javascript">

      window.onload = function() {

         var form = document.getElementById("form1");

         form.options.onchange = function(e) {

            form.notes.value = this.options[this.selectedIndex].text;

            return true;

         }

      }

   </script>

  

  </head>

  <body>
 

<form id="form1" action="" method="post">

        <select name="options">

                <option>Select a template</option>

                <option>Nobody at home</option>

                <option>Something else</option>

        </select>

        <textarea rows="15" cols="57" name="notes"></textarea><br />

        <input type="submit" value="">

</form>
 

  </body>

</html>

Open in new window

0
 
LVL 2

Author Comment

by:synergiq
Comment Utility
Hi, both solutions work but is it possible to just add the text from the dropdown on to the end of what's in the textarea rather than replacing it?
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
of course change line 9 as follows:



form.notes.value += this.options[this.selectedIndex].text;

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 10

Expert Comment

by:bugada
Comment Utility
and try the code with IE, normally IE has strange effects...
0
 
LVL 2

Expert Comment

by:divstar
Comment Utility
You may wish to add a new line so that it inserts underneath anything already present

In which case line 9 from bugada's code would be
form.notes.value += '\n'+this.options[this.selectedIndex].text;

Open in new window

0
 
LVL 2

Author Comment

by:synergiq
Comment Utility
Perfect, thanks. I'll split the points as both solutions worked.
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
Thank you, a good decision.
Happy that helped you.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

763 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

9 Experts available now in Live!

Get 1:1 Help Now