Populate Textarea based on Select

Hi..

I'm looking for some javascript that will populate a <textarea> element based on what is selected in a <select> element within the same form.

If anyone could help me out, that would be amazing!

Thanks :)

There are a few, yes, but to help can you be more specific in the application uses for this?

Are there set responses, like if I select "first choice" from the drop down will the text box show "first choice" or will it show something different?

etc.

Well, ideally, the idea is this:

From a <select> element, I would select a certain topic/keyword. Then, the keyword would appear in a <input type='text'> element and a cooresponding block of text would be added to the <textarea>.

These would all be preset. That is to say, they're not being created dynamically or anything so I can hard code them.

The more important of the two events happening, is the textarea being populated with a pretermined string associated with the keyword. But I'd love to be able to do both.

So to answer your question, I'm looking to do both.

Copy the string from the <select> into the text <input>
AND
Copy a string associated with a partiular <option> into a <textarea>

I hope that makes sense.

Hi ReadyToLearn,
Try these codes:

HTML Code:

---

<form name="form1">
<select
style="background-color: transparent; font-size: 10px; color: rgb(0, 102, 153); font-family: verdana;"
name="menu">
<option value="#">Quick Links ...</option>
<option value="This is for value no.1">Value No. 1</option>
<option value="This is for value no.2">Value No. 2</option>
<option value="This is for value no.3">Value No. 3</option>
<option value="This is for value no.4">Value No. 4</option>
<option value="This is for value no.5">Value No. 5</option>
<option value="This is for value no.6">Value No. 6</option>
</select>
<input
style="font-size: 8pt; color: rgb(255, 255, 255); font-family: verdana; background-color: rgb(0, 102, 153);"
value="Populate" type="button" onClick="document.form1.accept.value=document.form1.menu.options[document.form1.menu.selectedIndex].value;document.form1.textareaaccept.value=document.form1.menu.options[document.form1.menu.selectedIndex].value;">
<br/>
<br/>
<input type="text" name="accept" style="width:200px;">
<br/>
<textarea size="100px" name="textareaaccept" style="width:200px;height:100px;">
</textarea>
</form>

---

See if it helps:D

Thank you!
That'e exactly what I wanted.

If it wouldn't be TOO much trouble, could someone point out how I could access the text of the <option> via javascript.

My text of the <option> I mean the text in red below.
<option>TEXT</option>.

Nevermind, I figured it out!

I changed

Code:

---

document.form1.accept.value=document.form1.menu.options[document.form1.menu.selectedIndex].value

---

to

Code:

---

document.form1.accept.value=document.form1.menu.options[document.form1.menu.selectedIndex].text

---

Works EXACLTLY like I wanted now.

Thank you SO much, Rangana.

You're welcome!..Glad I could help :D

Please help..

Code:

---

<form name="form1">
<select
style="font-size: 10px; font-family: verdana;"
name="menu">
<option value="#">Quick Links ...</option>
<option value="This is for value no.1">Value No. 1</option>
<option value="This is for value no.2">Value No. 2</option>
<option value="This is for value no.3">Value No. 3</option>
</select>
<input
style="font-size: 8pt; font-family: verdana;"
value="Populate" type="button" onClick="document.form1.textareaaccept.value=document.form1.menu.options[document.form1.menu.selectedIndex].text;">
<br/>
<textarea size="100px" name="textareaaccept" style="width:600px;height:400px;">
</textarea>
</form>

---

I can't quite figure out why it is not loading the text from the option, but is instead loading the value of the option. Can anyone please help? I used the example given earlier on this thread but removed the text input because I wasn't sure what the purpose of it was.

(am going to implement here: http://straycreations.com/admin/support_newticket when done).

Just change the highlighted:

Code:

---

onClick="document.form1.textareaaccept.value=document.form1.menu.options[document.form1.menu.selectedIndex].text;

---

...with value

I'm an idiot. Thank you.