Populate Textarea based on Select

[ReadyToLearn]

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 :)

[BLiZZaRD]

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.

[ReadyToLearn]

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.

[rangana]

Hi ReadyToLearn,
Try these codes:

<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

[ReadyToLearn]

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>.

[ReadyToLearn]

Nevermind, I figured it out!

I changed


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

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

Works EXACLTLY like I wanted now.

Thank you SO much, Rangana.

[rangana]

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

[Ryya]

Please help..


<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).

[rangana]

Just change the highlighted:


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


...with value

[Ryya]

I'm an idiot. Thank you.

[Ryya]

This script I have been working on works when I test it standalone or on an online HTML testing website, but when I integrate it into my web page absolutely nothing works. I don't understand! Here is the page I have been working on integrating it into: straycreations.com/admin/support_newticket. The code that is in this snippet is the exact same as on this page, just loaded in to a table cell. Does anyone have some guidance? Thank you.


<script language="JavaScript" type="text/javascript">
<!--
function filtery(pattern, list){
if (!list.bak){
list.bak = new Array();
for (n=0;n<list.length;n++){
list.bak[list.bak.length] = new Array(list[n].value, list[n].text);
}
}
match = new Array();
nomatch = new Array();
for (n=0;n<list.bak.length;n++){
if(list.bak[n][1].toLowerCase().indexOf(pattern.toLowerCase())!=-1){
match[match.length] = new Array(list.bak[n][0], list.bak[n][1]);
}else{
nomatch[nomatch.length] = new Array(list.bak[n][0], list.bak[n][1]);
}
}
for (n=0;n<match.length;n++){
list[n].value = match[n][0];
list[n].text = match[n][1];
}
for (n=0;n<nomatch.length;n++){
list[n+match.length].value = nomatch[n][0];
list[n+match.length].text = nomatch[n][1];
}

list.selectedIndex=0;
}
// -->
</script>

<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.value;">
<input type="text" name="yourTextField"
onkeyup="filtery(this.value,this.form.menu)"
onchange="filtery(this.value,this.form.menu)">
<br/>
<textarea size="100px" name="textareaaccept" style="width:600px;height:400px;">
</textarea>
</form>

Copy paste this code into a fresh page to see what I am trying to do. Basically, I want to search through results of a dropdown menu using the text box (example enter "2" to bring all options in the dropdown menu with the number "2" in it to the top of the list). Then once you select the drop down choice you populate the text area by clicking the button. Please help i'm so stumped.. I appreciate it guys.

[Ryya]

RESOLVED. The problem: I used multiple forms named "form1".