By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,426 Members | 3,338 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,426 IT Pros & Developers. It's quick & easy.

Hide/Show Text Area Using Select List

P: 5
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!
Jun 15 '06 #1
Share this Question
Share on Google+
4 Replies


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

P: 1
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?
Oct 13 '06 #3

P: 1
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
Jan 18 '07 #4

P: 2
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>
Jan 18 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.