Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old April 27th, 2004, 03:28 AM
Registered User
 
Join Date: Apr 2004
Location: Singapore, Singapore, Singapore.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default Enable / Disable Form Fields Automatically

Hi ppl, can anyone help me out? I have a web based form. In it, there are several radio buttons. By selecting a particular radio button, I hope to display other form fields that require input from the user.

So for example, if I select radio button 1, text fields A, B and C appear in the form. If I select radio button 2, only text fields D, E and F appear.

Anyone knows how this can be achieved or know of more resources where I can read this up.

Thanks in advance.:D
  #2 (permalink)  
Old April 27th, 2004, 09:39 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Jack,

There are a lot of ways to do this. Basically, you should use JavaScript to set the display of the region you want to hide to 'none'. You could also determine to disabled the controls in that area, so the area stays visible, but the controls are unusable.

Below you'll find a simple example. As soon as you click one of the radio buttons, a method called that expects the number of the region you want to hide. Alternatively, you can have this method accept the ID of the control.

The method that hides ALL regions, and only makes the requested region visible again.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hide or Show Stuff with JavaScript</title>
<script type="text/javascript">
function HideOrShowStuff(regionToHide)
{
    if (document.getElementById)
    {
        // Hide all regions
        document.getElementById('region1').style.display = 'none';
        document.getElementById('region2').style.display = 'none';
        // Display the requested region
        document.getElementById
                ('region' + regionToHide).style.display = 'block';
    }
    else
    {
        alert('Sorry, your browser doesn\'t support this');
    }
}

</script>
</head>

<body>
<form name="frmTest" id="frmTest">
    <input name="radio1" type="radio" 
        value="" onclick="HideOrShowStuff(1)" />Show Region 1

    <input name="radio2" type="radio" 
        value="" onclick="HideOrShowStuff(2)" />Show Region 2
</form>
<div id="region1" style="display:none;width:50%;border: 1px solid #000">
Hi, I am region 1
</div>
<div id="region2" style="display:none;width:50%;border: 1px solid #000">
Hi, I am region 2
</div>
</body>
</html>
Hope this helps,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Marshall Mathers by Eminem (Track 11 from the album: The Marshall Mathers LP) What's This?

  #3 (permalink)  
Old April 27th, 2004, 09:40 AM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Are you trying to display/hide the form fields, or just enable/disable them?

HTH,

Snib

<><
  #4 (permalink)  
Old April 28th, 2004, 03:59 AM
Registered User
 
Join Date: Apr 2004
Location: Singapore, Singapore, Singapore.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default


Hmmm... So it sort of like creates a hidden layer and is "activated" only when the radio button is selected.

I've come across forms on the net where additional fields are introduced only when you have selected a particular radio button. These additional fields would need to be filled in and be submitted together with the form. Do you think it would work in this case? Thanks Imar.

With regards to Snib's question, I'm hoping to hide / display the additional form fields.

I saw this particular example on http://www.js-examples.com/javascript/?run=122

It "blurs" the portion which is not needed, when you select a radio button. I skimmed throught the code, but could not decipher it. (I'm very new in Javascript coding):D
  #5 (permalink)  
Old April 28th, 2004, 04:35 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi jackyam,

Yeah, that would certainly work. However, in my example I made a little mistake. I added the <div> elements outside the form. So, when you put form control inside those divs, they won't be submitted with the form. To correct that, simple move the opening form tag to right after the <body> tag, and the closing </form> tag to right before the closing </body> tag. That way, the entire page is wrapped in the form and all controls will be submitted.

Hiding and showing specific controls is quite possible as well. I changed my example a bit so it hides and shows individual controls, instead of <div> elements. Please note, that while a control may be invisible for the user, it will be still be submitted to the server. To fix that, you'll need to disable the control as well.
Below you'll find an example that hides or shows textboxes depending on what radio button you select. Hidden textboxes are also disabled to prevent them from being submitted. You can mix this example with my previous one, so you can hide and disable individual controls, or entire divs. You can also remove the code that hides the controls, and only leave the code that disables them in place. This way, your user has a visual cue that there are certain controls, but that they are unusable because of their selection.
I also added some ASP code (between <% and %>) so you can see the contents of the controls submitted to the server. If you're not using ASP, simply remove the code block.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
Dim MyString
For Each MyString in Request.Form
  Response.Write("Element " & MyString & " has a value of " _
    & Request.Form(MyString) & "<br />")
Next
%>
<html>
<head>
<title>Hide or SHow Controls Demo</title>
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
    if (document.getElementById)
    {
        // Hide all regions
        document.getElementById('txtShow1').style.display = 'none';
        document.getElementById('txtShow2').style.display = 'none';
        document.getElementById('txtShow1').disabled = 'disabled';
        document.getElementById('txtShow2').disabled = 'disabled';
        // Display the requested region
        document.getElementById
            ('txtShow' + controlToHide).style.display = 'block';
        document.getElementById
            ('txtShow' + controlToHide).disabled = '';
    }
    else
    {
        alert('Sorry, your browser doesn\'t support this');
    }
}

</script>
</head>
<body>
<form name="frmTest" id="frmTest" action="MyPage.asp" method="post">
    <input name="radio1" type="radio" 
        value="" onclick="HideOrShowStuff(1)" />Show Region 1<br />
    <input name="radio1" type="radio" 
        value="" onclick="HideOrShowStuff(2)" />Show Region 2<br />
    <input type="text" value="" id="txtShow1" 
        name="txtShow1" style="display:none;" /><br />
    <input type="text" value="" id="txtShow2" 
        name="txtShow2" style="display:none;" /><br />
    <input type="submit" id="btnSubmit" value="Submit Me" />
</form>
</body>
</html>
Hope this helps,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Hot Wire My Heart by Sonic Youth (Track 8 from the album: Sister) What's This?
  #6 (permalink)  
Old April 28th, 2004, 08:09 PM
Registered User
 
Join Date: Apr 2004
Location: Singapore, Singapore, Singapore.
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hey Imar,

That's exactly what I need! Thanks a dozen oh Guru.... Really appreciate your help.

I'm also thrilled after I read your writeup on how you managed to include what your PC is playing in your signature during the postings. Way cool!
  #7 (permalink)  
Old May 21st, 2007, 12:57 AM
Authorized User
 
Join Date: May 2007
Location: , , .
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Please Help!!!

How to use to OnClick for Radiobutton for ASP.Net.

If I use javascrip, then Radio button for classic ASP:
<input name="radio1" type="radio"
        value="" onclick="HideOrShowStuff(1)" />Show Region 1
.....

But If I work .NET, Radiobutton Group for ASP.Net doesn't support onclick, That's Onclick is not member of Radiobutton .
So How to do?


  #8 (permalink)  
Old May 21st, 2007, 01:01 AM
Authorized User
 
Join Date: May 2007
Location: , , .
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Please Help!

How to use to OnClick for Radiobutton for ASP.Net.

If I use javascrip, then Radio button for classic ASP:
<input name="radio1" type="radio"
        value="" onclick="HideOrShowStuff(1)" />Show Region 1
.....

But If I work .NET, Radiobutton Group for ASP.Net doesn't support onclick, That's Onclick is not member of Radiobutton .
So How to do?

  #9 (permalink)  
Old May 21st, 2007, 01:35 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Look at the Attributes collection for the button. E.g. in Code Behind:

myButton.Attributes.Add("onclick", "WhatEverScriptYouNeed");

Or, in .NET 2, look at OnClientClick.

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
  #10 (permalink)  
Old March 14th, 2008, 11:41 AM
Registered User
 
Join Date: Mar 2008
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

This is almost what I need, just a minor thingie I suspect.

Instead of radio buttons I need checkboxes. If the checkbox is checked the Region1 from the example needs to be shown. If then it is unchecked Region1 should be hidden again.

I can get it to show, but not to hide it again. Any Javascript guru's know a quick solution?

TIA




Similar Threads
Thread Thread Starter Forum Replies Last Post
Using JS to enable/disable?? crabjoe Javascript 4 November 10th, 2008 06:48 PM
Disable and Enable at runtime Hammam ASP.NET 1.0 and 1.1 Professional 0 May 17th, 2006 12:40 AM
Enable/Disable Form Elements Question kwilliams Javascript 4 February 28th, 2006 11:28 AM
Disable/Enable elements ldoodle Javascript How-To 3 June 7th, 2005 05:48 AM
Enable & Disable a field using Javascript laxmig Javascript How-To 6 January 24th, 2005 08:26 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.