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

20944

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

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Hide/Show Text Area Using Select List

Similar topics