473,692 Members | 1,863 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Hide/Show Text Area Using Select List

5 New Member
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
4 21000
devine
5 New Member
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
ByteofK
1 New Member
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
JimPap
1 New Member
I'm using the script found at this thread:

www.thescripts. com/forum/thread88791.htm l

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
sageman
2 New Member
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="javas cript">
function chkSubmit(){
document.Change ControlForm.act ion="confirm5.a sp";
}
function chkSave(){
document.Change ControlForm.act ion="save.asp";
}
</script>
<script type="text/javascript">
//<![CDATA[
function toggleSubmit(se l)
{
var submit = document.getEle mentById('submi t');
var area = document.getEle mentById('jarea ');
if ( sel.options[sel.selectedInd ex].value == "Yes" ) {
submit.value = 'Submit to Change Control';
jarea.style.dis play = "block";
} else {
submit.value = 'Submit Emergency Change';
jarea.style.dis play = "none";
}

}
//]]>

</script>

<table>
<tr>
<td width="199" bgcolor="#26006 3">
<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="toggl eSubmit(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="#26006 3">
<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="#26006 3">
<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"><te xtarea name="summary" rows="3" size="150" cols="38"></textarea></td>
</tr>
<tr>
<td width="199" bgcolor="#26006 3"><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="#2 60063"><input type="text" name="Area" size="50"></td>
</tr>
<tr>
<td colspan='3'>
<input type="submit" name="Submit2" value="Save Progress" onClick="chkSav e();">
<input id="submit" type="submit" name="Submit" value="Submit to Change Control" onClick="chkSub mit();">
<input type="submit" name="Submit1" value="Submit Emergency Change" disabled=true>
</td>
</tr>
</table>
Jan 18 '07 #5

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

Similar topics

6
148612
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected value="">Please make a selection</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option>
19
6884
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the JavaScript in this code from a couple different sites but I'm not 100% sure what each line is doing...This is the ASP code that I'm using for the page....Take a look at the JavaScript code and please let me know what each line is doing....I have been...
0
2096
by: Efkas | last post by:
I have a full custom application with some widged extending Controls like Label and PictureBox. I build a menu with these widgets. When I click on one of them, it calls a function to display some stuff in the main display area. The stuff to display is one of many assemblies loaded at the opening of the application by Activator.CreateInstance, because I want it independant of the main application, as a plugin. All assembly are loaded...
5
4570
by: srampally | last post by:
I need the capabilty to hide/show a selection list, just the way its done at http://www.lufthansa.com (place the cursor over "Group Companies"). However, I am looking for a javascript that is much simpler. Here is what I have until now. Problems with my code: 1. The selection list becomes invisible when I try to select an option (in Firefox). 2. The selection list stays visible when I just place the cursor over selection list and move...
7
29133
by: FP | last post by:
I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field below the comment with a spell check & submit button. Clicking "Amend" would display the same buttons & text field but pre-populated with the original comment. Using Java Script how do I show / hide the text field in my list of comments but have...
1
16748
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...
2
3249
Chittaranjan
by: Chittaranjan | last post by:
Hi All, I am having a problem using Javascript in Perl script. In the perl module I have included the Javascript codes and that is workign fine for validation purpose but when I am trying to show and hide some divisions randomly selecting from a drop down menu then that is working fine in Mozilla but not working in IE 6/7. Here is some part of my code: if any suggestions please welcome... Thanks, Chittaranjan This is the Javascript...
0
3447
by: Reinhard | last post by:
Hi, Need some directions on Ajax, UpdatePanel and Gridview to achive the following: I like to show a Gridview with Data ONLY if the user is interested in Details, but without a full page reload! If the page loads, only a summary (eg. COUNT of recs) should be displayed
3
3350
by: timplx | last post by:
Hello all, New to javascript and have never worked with programming languages like c++, so my logic in some of these statements might be incorrect or redundant Got a problem with my page... using java and external css to show/hide items on the same click. I found a script that uses the getElementById function to adjust the display style of a div id. I have utilized this to show four ids in the same space on my page. Some ids start with...
0
8603
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8960
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8800
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7627
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6459
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5818
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4323
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4557
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
1957
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.