Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 335
  • Last Modified:

Insert value from dropdown into textarea onclick

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
synergiq
Asked:
synergiq
  • 4
  • 2
  • 2
2 Solutions
 
divstarCommented:
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
 
bugadaCommented:
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
 
synergiqAuthor Commented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
bugadaCommented:
of course change line 9 as follows:



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

Open in new window

0
 
bugadaCommented:
and try the code with IE, normally IE has strange effects...
0
 
divstarCommented:
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
 
synergiqAuthor Commented:
Perfect, thanks. I'll split the points as both solutions worked.
0
 
bugadaCommented:
Thank you, a good decision.
Happy that helped you.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now