populating textarea thru a hidden dropdown list

**sifar** · 12-07-2005, 09:17 PM

Hi,

I have 2 dropdown lists & 2 textarea boxes. (e.g dropdown1, dropdown2 & textarea1 & textarea2).
the first list is visible. the second is not.

on selecting the first list, i want to change the selection in the 2nd hidden list, which will automatically insert some text into textarea2. Similarly, the 1st list i.e. dropdown1 will also insert some text into textarea1.

The textareas are for Error-Description & Error-Solution.

The user will select the 1st visible list i.e. dropdown1 to select an error he is facing, so that gets inserted in textarea1, & automatically the resolution will be in the 2nd dropdownlist, so it will get inserted into textarea2.

Hope i am clear.

Sifar

**sifar** · 12-08-2005, 05:10 PM

Hi,

to give a graphical representation of what i am trying to do:

Visible Hidden
<Dropdown1> <Dropdown2>

-------------------------------------
| |
| textarea1 |
-------------------------------------

-------------------------------------
| |
| textarea2 |
-------------------------------------

Please help!

Rgds,

Sifar

**Twey** · 12-08-2005, 05:48 PM

I don't understand why you want to have one <select> select an option in another. Why not just have the user select the correct option from the original list?

**jscheuer1** · 12-08-2005, 05:55 PM

No need to go to all that trouble. A select box option already has a place to put the content for the other textarea, its value attribute, ex:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Tech Support</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<form>
<select onchange="this.form.prob.value=this.options[this.selectedIndex].innerHTML;this.form.solu.value=this.options[this.selectedIndex].value">
<option value="" selected>Select from Drop Down List</option>
<option value="Plug in the Computer">No Power</option>
<option value="Turn on the Monitor">Screen is Dark</option>
</select><br>&nbsp;<br>
<table>
<tr>
    <td valign="top">Problem:</td>
                <td><textarea name="prob" rows="3" cols="30">Select from Drop Down List</textarea></td>
    <td valign="top">Solution:</td>
                 <td><textarea name="solu" rows="3" cols="30"></textarea></td>
                 </tr>
                </table>
</form>
</body>
</html>

**sifar** · 12-08-2005, 06:13 PM

Thanks.....i think that should take care of it....only thing, for each error no. i will have to have to write 5-7 lines of solution between the option tags, each separated by '\n' at end so that they fall one below the other...

am i correct?

THank you very much!
Sifar

**sifar** · 12-08-2005, 06:24 PM

Oh BTW.... i forgot to tell you that i have a no of similar dropdown lists & so according to what you showed, each should be able to enter "prob" value selected & "solu" value in the two textareas automatically.

what i want to know is that if the first dropdown enters prob & solu values in the two textareas & when i select the next dropdown, will it enter the prob & solu values below the previous values...i.e. on the next line below???

**sifar** · 12-08-2005, 06:30 PM

i just checked out & found that the previous values are overwritten with the values of second dropdown list, in the 2 textareas. can't i keep all the values of the dropdown lists selected???

Also, how to make sure that each problem & solution values comes on a separate line???

PLEASE HELP ASAP!

Rgds,

Sifar

**Twey** · 12-08-2005, 07:05 PM

John: there's no need to use innerHTML here; the Option object has a text property that can be used to access the text inside it.
Sifar: \n will not work, as the value attribute is not Javascript. You can put linebreaks within the quotes.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
  <head>
    <title>Tech Support</title>
  </head>
  <body>
    <form>
      <select onchange="
        if(this.value == '') return false;
        if(this.form.prob.value.indexOf('Select from Drop Down List') > -1)
          this.form.prob.value = '';
        this.form.prob.value += '\n' + this.options[this.selectedIndex].text;
        this.form.solu.value += '\n' + this.options[this.selectedIndex].value;
      ">
        <option value="" selected>Select Problem From Drop Down List</option>
        <option value="Plug in the Computer
Switch the Socket On">No Power</option>
        <option value="Turn on the Monitor">Screen is Dark</option>
      </select><br>&nbsp;<br>
      <table>
        <tr>
          <td valign="top">Problem:</td>
          <td>
            <textarea name="prob" rows="3" cols="30">Select from Drop Down List</textarea>
          </td>
          <td valign="top">Solution:</td>
          <td>
            <textarea name="solu" rows="3" cols="30"></textarea>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>