I'm looking for a small bit script that is made up of a form [Select] tag and an [textarea] tag.

I would like the contents of the textarea to be non modifiable, but change depednding on which option within the Select tag is picked.

e.g Select pull down menu with items

2007
2008
2009
2010

The the text area displaying "2007 - A good year for pizza, beer and football" when 2007 is selected, "2008 - A good year for pasta, wine and movies" when 2008 is selected and so on.

(BTW, the task I will use it for has nothing to to with dates, but it seemed the easiest example).

I'm sure this is probably easy to do, but I cant seem to select the right keywords for a google search as it comes up empty.

Cheers

Report this post to a moderator | IP: Logged

Tested and working

code:

<form id="form">
<textarea name ="form[textarea]" id="formTextarea" READONLY></textarea>
<select id="formSelect" name="form[select]" onchange="document.getElementById('formTextarea').innerHTML=this.options[this.selectedIndex].value;">
<script type="text/javascript">
 var select = new Array(5);
 select[0] = "2005";
 select[1] = "2006";
 select[2] = "2007";
 select[3] = "2008";
 select[4] = "2009";
 for (var x = 1; x < 5; x++)
   {
  document.write("<option value = '" + select[x] + "'>" + select[x] + "</option>\n");
   }
 </script>
</form>

__________________



i have sigs off

Report this post to a moderator | IP: Logged

:edit: I was asking a bit much in this post. Running before I could walk, the next post down has a much simpler request, that once I get right should be easy to expand. :edit:

Thanks for the code Dwaggy, it does work well, but isn’t quite what I need.

In my actual brief the different selections with the <Select> statement should produce radical difference in the <textarea>. Meaning a one word select option may need to produce a paragraph of text.

I have used the code on this page http://www.felgall.com/jstip22a.htm to create 2 select options.

Select1 and Select2, with Select2 options dynamically changing depending on which option is picked in Select1.

The only problem being is that I need a <textarea> to dynamically change when different options are picked within select2.

The end user should pick an option in select1, this will limit the options available in select2. When something is then picked from select2 the text area should produce a paragraph displaying the details of the select2 option.

The code I have works, with select2 being dynamically created from select1, but what I need now is for textarea to by dynamically created from select2.

I wish I could explain it a bit better, but hopefully you get the idea.

Any idea how I would go about it?

Last edited by cobalt on 02-04-2007 at 06:30 PM

Report this post to a moderator | IP: Logged

Bit more practical information.

quote:

---

function menupick(chosen)
{
if (chosen == "Foo")
{
document.my_form.my_text_area.defaultValue[="here is the information for item Foo"]
}

if (chosen == "Bar")
{ document.my_form.my_text_area.defaultValue[="here is the information for item Bar"]
}
}

---

Report this post to a moderator | IP: Logged

Fixed it,

quote:

---

document.my_form.my_text_area.value = "blah blah"

---

Changed DefaultValue to Value, and simplfied the onclick() statment

Very happy now

Report this post to a moderator | IP: Logged