Hide/Show Text Area Using Select List

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>

    <title>Untitled</title>

    <script type="text/javascript">

    //<![CDATA[

    function toggleSubmit(chkbox)

    {

      var submit = document.getElementById('submit');

      var textarea = document.getElementById('justification');

      submit.value = (chkbox.checked) ? 'Submit Emergency Change' : 'Submit to Change Control';

      textarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none';

    }

    //]]>

    </script>

  </head>

  <body>

    <form id="form1" action="#" method="post">

      <div>

        <label for="emergency">Emergency?: (yes)</label> <input id="emergency" name="emergency" type="checkbox" value="yes" onclick="toggleSubmit(this);"/>

      <br />

        <textarea id="justification" name="justification" cols="38" rows="3" style="display:none;"></textarea>

        <input id="submit" name="submit" type="submit" value="Submit to Change Control" />

      </div>

    </form>

  </body>

</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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>

    <title>Untitled</title>

    <script type="text/javascript">

    //<![CDATA[

    function toggleSubmit(chkbox)

    {

      var submit = document.getElementById('submit');

      var textarea = document.getElementById('justification');

      submit.value = (chkbox.checked) ? 'Submit Emergency Change' : 'Submit to Change Control';

      textarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none';

    }

    //]]>

    </script>

  </head>

  <body>

    <form id="form1" action="#" method="post">

      <div>

         <label for="emergency">Emergency</label> 

        <select name="emergency">

        <option value="No"  >No</option>

        <option value="Yes" onchange="toggleSubmit(this);">Yes </option>

        </select>
 
      <br />

        <textarea id="justification" name="justification" cols="38" rows="3" style="display:none;"></textarea>

        <input id="submit" name="submit" type="submit" value="Submit to Change Control" />

      </div>

    </form>

  </body>

</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

 function toggleSubmit(chkbox)    submit.value = (chkbox.checked)  ? 'Submit Emergency Change' : 'Submit to Change Control';

      textarea.style.display = (submit.value == 'Submit Emergency

Any pointers would be gratefully received!

Jun 15 '06 #1

Subscribe Post Reply

20890

devine

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

  <head> 

    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/> 

    <title>Untitled</title> 

    <script type="text/javascript"> 

    //<![CDATA[ 

    function toggleSubmit(sel) 

    { 

      var submit = document.getElementById('submit'); 

      var area = document.getElementById('jarea'); 

      submit.value = (sel.options[sel.selectedIndex].value=="yes") ? 'Submit Emergency Change' : 'Submit to Change Control'; 

      jarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none'; 

    } 

    //]]> 

    </script> 
 
  </head> 
 
  <body> 

    <form id="form1" action="#" method="post"> 

      </form> 

      <div> 

      <tr><td> 

      <label for="emergency"><span style="background-color: #260063"> 

      <font color="#FFFFFF" face="Sky InfoText Bd">Emergency Change?</font>:</span> </label> </td></tr> 

      <tr><td> 

      <select id="emergency" name="emergency" onchange="toggleSubmit(this);"> 

          <option label="Yes" value="yes">Yes</option> 

          <option label="No" value="no" selected="selected">No</option> 

        </select> 

        </td></tr> 
 
      <br /> 

      <div id="jarea" style="display:none;"> 

          <label for="justification"><font color="#FFFFFF" face="Sky InfoText Bd"> 

        <span style="background-color: #260063">Please provide justification for emergency change</span></font> </label> 

        <textarea title="Please provide justification for emergency change" name="justification" cols="38" rows="3"></textarea> 

        </div> 

        <input id="submit" name="submit" type="submit" value="Submit to Change Control" /> 

      </div> 

    </form> 

  </body> 

</html>  <body>

Now when I try to insert this code into another page which has other fields, nothing happens!

Expand|Select|Wrap|Line Numbers

 <%@ LANGUAGE="VBSCRIPT" %> 

<%response.buffer=true%> 
 
<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'); 

      submit.value = (sel.options[sel.selectedIndex].value=="yes") ? 'Submit Emergency Change' : 'Submit to Change Control'; 

      jarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none'; 

    } 

    //]]> 
 
</script> 
 
<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 label="No" value="No" selected="selected">No</option> 

            <option label="Yes" value="Yes">Yes</option> 

            </select> 

</td></tr> 

</div> 

<div id="jarea" style="display:none;"> 

<tr><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> 

</div> 
 
<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> 

<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> 

</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

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

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

sageman

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

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...

Javascript

JavaScript - HIDE/DISPLAY text boxes

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

Something more performant than Hide and Show control method?

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...

C# / C Sharp

Hide/Show Selection List

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...

Javascript

Show/Hide text field

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...

Javascript

Nested Show Hide Div Form Elements

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...

Javascript

Javascript div hide/show problem in IE

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...

Javascript

Ajax: UpdatePanel to show/hide Gridview

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...

ASP.NET

Show and hide on the same click

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......

Javascript

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA

How to find best mobile app development company in usa

by: Aliciasmith | last post by:

In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...

Mobile Development

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

VBA Class Basics

by: NeoPa | last post by:

Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...

Microsoft Access / VBA

Report value list

by: Teri B | last post by:

Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Microsoft Access / VBA

Hide/Show Text Area Using Select List

Similar topics