Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Hide/Show Text Area Using Select List

Newbie
  
Join Date: Jun 2006
Posts: 5
#1: Jun 15 '06
Hi All,

I am VERY new to Javascript.

I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box.


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
  6.     <title>Untitled</title>
  7.     <script type="text/javascript">
  8.     //<![CDATA[
  9.     function toggleSubmit(chkbox)
  10.     {
  11.       var submit = document.getElementById('submit');
  12.       var textarea = document.getElementById('justification');
  13.       submit.value = (chkbox.checked) ? 'Submit Emergency Change' : 'Submit to Change Control';
  14.       textarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none';
  15.     }
  16.     //]]>
  17.     </script>
  18.   </head>
  19.   <body>
  20.     <form id="form1" action="#" method="post">
  21.       <div>
  22.         <label for="emergency">Emergency?: (yes)</label> <input id="emergency" name="emergency" type="checkbox" value="yes" onclick="toggleSubmit(this);"/>
  23.       <br />
  24.         <textarea id="justification" name="justification" cols="38" rows="3" style="display:none;"></textarea>
  25.         <input id="submit" name="submit" type="submit" value="Submit to Change Control" />
  26.       </div>
  27.     </form>
  28.   </body>
  29. </html>

This code works great, but I would like to alter it so that rather than a checkbox, selection is made by a selection list containing yes and no.

I have messed around with the code:


Code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
  6.     <title>Untitled</title>
  7.     <script type="text/javascript">
  8.     //<![CDATA[
  9.     function toggleSubmit(chkbox)
  10.     {
  11.       var submit = document.getElementById('submit');
  12.       var textarea = document.getElementById('justification');
  13.       submit.value = (chkbox.checked) ? 'Submit Emergency Change' : 'Submit to Change Control';
  14.       textarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none';
  15.     }
  16.     //]]>
  17.     </script>
  18.   </head>
  19.   <body>
  20.     <form id="form1" action="#" method="post">
  21.       <div>
  22.          <label for="emergency">Emergency</label> 
  23.         <select name="emergency">
  24.         <option value="No"  >No</option>
  25.         <option value="Yes" onchange="toggleSubmit(this);">Yes </option>
  26.         </select>
  27.  
  28.  
  29.       <br />
  30.         <textarea id="justification" name="justification" cols="38" rows="3" style="display:none;"></textarea>
  31.         <input id="submit" name="submit" type="submit" value="Submit to Change Control" />
  32.       </div>
  33.     </form>
  34.   </body>
  35. </html>
and as you can see, I clearly have no clue what I'm doing!

I figure the following should be changed to reflect a select list:



Expand|Select|Wrap|Line Numbers
  1. function toggleSubmit(chkbox)    submit.value = (chkbox.checked)  ? 'Submit Emergency Change' : 'Submit to Change Control';
  2.       textarea.style.display = (submit.value == 'Submit Emergency 
Any pointers would be gratefully received!

Newbie
  
Join Date: Jun 2006
Posts: 5
#2: Jun 21 '06

re: Hide/Show Text Area Using Select List

Hi All,
I have some code which enables me to show/hide a text area and switch submit buttons depending on a Select List.
This works great on a page on it's own:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
  4.   <head> 
  5.     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/> 
  6.     <title>Untitled</title> 
  7.     <script type="text/javascript"> 
  8.     //<![CDATA[ 
  9.     function toggleSubmit(sel) 
  10.     { 
  11.       var submit = document.getElementById('submit'); 
  12.       var area = document.getElementById('jarea'); 
  13.       submit.value = (sel.options[sel.selectedIndex].value=="yes") ? 'Submit Emergency Change' : 'Submit to Change Control'; 
  14.       jarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none'; 
  15.     } 
  16.     //]]> 
  17.     </script> 
  18.  
  19.   </head> 
  20.  
  21.   <body> 
  22.     <form id="form1" action="#" method="post"> 
  23.       </form> 
  24.       <div> 
  25.       <tr><td> 
  26.       <label for="emergency"><span style="background-color: #260063"> 
  27.       <font color="#FFFFFF" face="Sky InfoText Bd">Emergency Change?</font>:</span> </label> </td></tr> 
  28.       <tr><td> 
  29.       <select id="emergency" name="emergency" onchange="toggleSubmit(this);"> 
  30.           <option label="Yes" value="yes">Yes</option> 
  31.           <option label="No" value="no" selected="selected">No</option> 
  32.         </select> 
  33.         </td></tr> 
  34.  
  35.  
  36.  
  37.       <br /> 
  38.       <div id="jarea" style="display:none;"> 
  39.           <label for="justification"><font color="#FFFFFF" face="Sky InfoText Bd"> 
  40.         <span style="background-color: #260063">Please provide justification for emergency change</span></font> </label> 
  41.         <textarea title="Please provide justification for emergency change" name="justification" cols="38" rows="3"></textarea> 
  42.         </div> 
  43.         <input id="submit" name="submit" type="submit" value="Submit to Change Control" /> 
  44.       </div> 
  45.     </form> 
  46.   </body> 
  47. </html>  <body> 
Now when I try to insert this code into another page which has other fields, nothing happens!


Expand|Select|Wrap|Line Numbers
  1. <%@ LANGUAGE="VBSCRIPT" %> 
  2. <%response.buffer=true%> 
  3.  
  4. <script language="javascript"> 
  5. function chkSubmit(){ 
  6. document.ChangeControlForm.action="confirm5.asp"; 
  7. } 
  8. function chkSave(){ 
  9. document.ChangeControlForm.action="save.asp"; 
  10. } 
  11. </script> 
  12. <script type="text/javascript"> 
  13.     //<![CDATA[ 
  14.     function toggleSubmit(sel) 
  15.     { 
  16.       var submit = document.getElementById('submit'); 
  17.       var area = document.getElementById('jarea'); 
  18.       submit.value = (sel.options[sel.selectedIndex].value=="yes") ? 'Submit Emergency Change' : 'Submit to Change Control'; 
  19.       jarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none'; 
  20.     } 
  21.     //]]> 
  22.  
  23. </script> 
  24.  
  25.  
  26. <tr><td width="199" bgcolor="#260063"> 
  27. <div> 
  28.   <font color="#FFFFFF" face="Sky InfoText Bd">Emergency?: </font> </td> 
  29. <td width="17" align="center"> </td> 
  30. <td width="360"><select id="emergency" name="emergency" onchange="toggleSubmit(this);"> 
  31.             <option label="No" value="No" selected="selected">No</option> 
  32.             <option label="Yes" value="Yes">Yes</option> 
  33.             </select> 
  34. </td></tr> 
  35. </div> 
  36. <div id="jarea" style="display:none;"> 
  37. <tr><td width="199" bgcolor="#260063"> 
  38.   <font color="#FFFFFF" face="Sky InfoText Bd">PROVIDE JUSTIFICATION FOR EMERGENCY CHANGE: </font> </td> 
  39. <td width="17" align="center"> </td> 
  40. <td width="360"><textarea title="Please provide justification for emergency change" name="emergency_justification" rows="3" size="150" cols="38"></textarea></td></tr> 
  41. </div> 
  42.  
  43.  
  44. <tr><td width="199" bgcolor="#260063"> 
  45.   <font color="#FFFFFF" face="Sky InfoText Bd">Change Summary: </font> </td> 
  46. <td width="17" align="center"><font color="#FF0000" face="Times New Roman">*</font></td> 
  47. <td width="360"><textarea name="summary" rows="3" size="150" cols="38"></textarea></td></tr> 
  48. <tr><td width="199" bgcolor="#260063"> 
  49.   <font color="#FFFFFF" face="Sky InfoText Bd">Area of Impact: </font> </td> 
  50. <td width="17" align="center"><font color="#FF0000" face="Times New Roman">*</font></td> 
  51. <td width="360" bordercolor="#260063"><input type="text" name="Area" size="50"></td></tr> 
  52. <input type="submit" name="Submit2" value="Save Progress" onClick="chkSave();"> 
  53. <input id="submit" type="submit" name="Submit" value="Submit to Change Control" onClick="chkSubmit();"> 
  54. <input type="submit" name="Submit1" value="Submit Emergency Change" disabled=true> 
  55. </table> 
T

he button's don't switch, textarea is not hidden, but have no clue where I'm going wrong (VERY new to Javascript!) :o
Thanks in advance for any help/guidance!
Newbie
  
Join Date: Oct 2006
Posts: 1
#3: Oct 13 '06

re: Hide/Show Text Area Using Select List

The JS needs to be in the HEAD of the document. Your second example doesn't show the BODY or HEAD tags so I am guessing that is the problem?
Newbie
  
Join Date: Jan 2007
Posts: 1
#4: Jan 18 '07

re: Hide/Show Text Area Using Select List

I'm using the script found at this thread:

www.thescripts.com/forum/thread88791.html

It works fine until you put <form> </form> tags around it to send the data to another page.

I'm a javascript novice and would appreciate some guidance to get this javascript to work.

Thank,

Jim
Newbie
  
Join Date: Jan 2007
Posts: 2
#5: Jan 18 '07

re: Hide/Show Text Area Using Select List

From what I see, looks like a few things, like your HTML was way out of wack, but either way, here is how I would do it to make it work. Not sure if you were trying to change the text of the button or toggle the enabled status of the 2 buttons depending in which option was selected;

<script language="javascript">
function chkSubmit(){
document.ChangeControlForm.action="confirm5.asp";
}
function chkSave(){
document.ChangeControlForm.action="save.asp";
}
</script>
<script type="text/javascript">
//<![CDATA[
function toggleSubmit(sel)
{
var submit = document.getElementById('submit');
var area = document.getElementById('jarea');
if ( sel.options[sel.selectedIndex].value == "Yes" ) {
submit.value = 'Submit to Change Control';
jarea.style.display = "block";
} else {
submit.value = 'Submit Emergency Change';
jarea.style.display = "none";
}

}
//]]>

</script>

<table>
<tr>
<td width="199" bgcolor="#260063">
<div>
<font color="#FFFFFF" face="Sky InfoText Bd">Emergency?: </font>
</td>
<td width="17" align="center"> </td>
<td width="360">
<select id="emergency" name="emergency" onchange="toggleSubmit(this);">
<option selected>--</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
</tr>
<tr id="jarea" style="display:none;">
<td width="199" bgcolor="#260063">
<font color="#FFFFFF" face="Sky InfoText Bd">PROVIDE JUSTIFICATION FOR EMERGENCY CHANGE: </font>
</td>
<td width="17" align="center"> </td>
<td width="360">
<textarea title="Please provide justification for emergency change" name="emergency_justification" rows="3" size="150" cols="38"></textarea>
</td>
</tr>
<tr>
<td width="199" bgcolor="#260063">
<font color="#FFFFFF" face="Sky InfoText Bd">Change Summary: </font>
</td>
<td width="17" align="center"><font color="#FF0000" face="Times New Roman">*</font></td>
<td width="360"><textarea name="summary" rows="3" size="150" cols="38"></textarea></td>
</tr>
<tr>
<td width="199" bgcolor="#260063"><font color="#FFFFFF" face="Sky InfoText Bd">Area of Impact: </font> </td>
<td width="17" align="center"><font color="#FF0000" face="Times New Roman">*</font></td>
<td width="360" bordercolor="#260063"><input type="text" name="Area" size="50"></td>
</tr>
<tr>
<td colspan='3'>
<input type="submit" name="Submit2" value="Save Progress" onClick="chkSave();">
<input id="submit" type="submit" name="Submit" value="Submit to Change Control" onClick="chkSubmit();">
<input type="submit" name="Submit1" value="Submit Emergency Change" disabled=true>
</td>
</tr>
</table>
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved