asked on

want to display text area for "selected" option value

this code displays a text area when Tue is selected in the drop down select menu

want to display text area for "selected" option value

a text area is displayed if I start at Tue and then go to Mon and then Tue

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
  function chgDisplayTextarea(value, textarea, switchValue) {
    document.getElementById(textarea).style.display = (value.indexOf(switchValue)==0)?"block":"none";
  }
</script>
</head>
<body>



<?
  $t1=$_POST[t1];
  $ta1=$_POST[ta1];
  echo "<br>t1 is $t1, ta1 is $ta1"; 
?>


<form method="post" action="#">
    <select name=t1 onchange="chgDisplayTextarea(this.value, 'textareaID', 'Tue')">
        <option value=Mon $Mon>Mon</option>
        <option selected value=Tue $Tue>Tue</option>
        <option value=Wed $Wed>Wed</option>
        <option value=Thu $Thu>Thu</option>
        <option value=Fri $Fri>Fri</option>
        <option value=Sat $Sat>Sat</option>
        <option value=Sun $Sun>Sun</option>
    </select>
    <input type=submit value=Submit>
    <textarea name="ta1" id="textareaID" cols="20" rows="20" style="display:none" value="hello"><? echo "$ta1";?></textarea>
</form>
</body>
</html>

Open in new window

Peter_Werner

This should work.
// You could use (value == switchValue) instead of (value.indexOf(switchValue)==0).

debugging hints:
- try to set style.display to "block" unconditionally to see if the JS is executed at all
- check variables in the JS (e.g. alert(value))

leakim971

-We set an id for the select box :
< select name=t1 id='t1' onchange="chgDisplayTextarea(this.value, 'textareaID', 'Tue')" >

- We check the state when we load the selectbox :
< body onload="t1=document.getElementById('t1');chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', 'Tue')" >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
  function chgDisplayTextarea(value, textarea, switchValue) {
      if(value.indexOf(switchValue)==0) {
         document.getElementById(textarea).style.display = "block";
      }
  }
</script>
</head>
<body onload="t1=document.getElementById('t1');chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', 'Tue')">

<?
  $t1=$_POST[t1];
  $ta1=$_POST[ta1];
  echo "<br>t1 is $t1, ta1 is $ta1"; 
?>


<form method="post" action="#">
    <select name=t1 id='t1' onchange="chgDisplayTextarea(this.value, 'textareaID', 'Tue')">
        <option value=Mon $Mon>Mon</option>
        <option selected value=Tue $Tue>Tue</option>
        <option value=Wed $Wed>Wed</option>
        <option value=Thu $Thu>Thu</option>
        <option value=Fri $Fri>Fri</option>
        <option value=Sat $Sat>Sat</option>
        <option value=Sun $Sun>Sun</option>
    </select>
    <input type=submit value=Submit>
    <textarea name="ta1" id="textareaID" cols="20" rows="20" style="display:none" value="hello"><? echo "$ta1";?></textarea>
</form>
</body>
</html>

Open in new window

rgb192

ASKER

I want to reuse this for multiple functions

is there a way to do this without using a <body> tag
because it will be hard to reuse code

maybe just
<onload="t1=document.getElementById('t1');chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', 'Tue')">

leakim971

Yes you can use onload somewhere else :

<script language="javascript">
   window.onload = function() {
       init1();
       event2();
       do_something3();
   }
</script>
<body>
<select>
....

Open in new window

rgb192

ASKER

I dont understand
how can I add that to the code

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rgb192

ASKER

line 14
could I change this
chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', 'Tue');

to
chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', '<? echo $selected;?>');

so I can dynamically change the select statement

leakim971

yes, no problem

rgb192

ASKER

works

thank you

leakim971

You're welcome! Thanks for the points!

I see I let an error in the code about the the id of the select. I don't set it, sorry.

rgb192

ASKER

The accepted solution only works in internet explorer, the text area does not appear by default in firefox

leakim971

Set the right id for the select box :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
  function chgDisplayTextarea(value, textarea, switchValue) {
    document.getElementById(textarea).style.display = (value.indexOf(switchValue)==0)?"block":"none";
  }
</script>
<script language="javascript">
   window.onload = function() {
          var t1 = document.getElementById('t1');
          chgDisplayTextarea(t1.options[t1.selectedIndex].value, 'textareaID', 'Tue');
   }
</script>
</head>
<body>



<?
  $t1=$_POST[t1];
  $ta1=$_POST[ta1];
  echo "<br>t1 is $t1, ta1 is $ta1"; 
?>


<form method="post" action="#">
    <select id="t1" name="t1" onchange="chgDisplayTextarea(this.value, 'textareaID', 'Tue')">
        <option value=Mon $Mon>Mon</option>
        <option selected value=Tue $Tue>Tue</option>
        <option value=Wed $Wed>Wed</option>
        <option value=Thu $Thu>Thu</option>
        <option value=Fri $Fri>Fri</option>
        <option value=Sat $Sat>Sat</option>
        <option value=Sun $Sun>Sun</option>
    </select>
    <input type=submit value=Submit>
    <textarea name="ta1" id="textareaID" cols="20" rows="20" style="display:none" value="hello"><? echo "$ta1";?></textarea>
</form>
</body>
</html>

Open in new window

rgb192

ASKER

Thanks, now works on ff3.

I have a similar question on your first answer.
I want to close a textarea when another textarea is open.

https://www.experts-exchange.com/questions/26450477/want-only-one-textarea-open.html

leakim971

You'Re welcome! I Will take a look to your New You question

want to display text area for &quot;selected&quot; option value

want to display text area for "selected" option value