Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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
Reply With Quote
  #2 (permalink)  
Old April 27th, 2004, 09:39 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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?

Reply With Quote
  #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

<><
Reply With Quote
  #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
Reply With Quote
  #5 (permalink)  
Old April 28th, 2004, 04:35 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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?
Reply With Quote
  #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!
Reply With Quote
  #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?


Reply With Quote
  #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?

Reply With Quote
  #9 (permalink)  
Old May 21st, 2007, 01:35 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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.
Reply With Quote
  #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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 02:03 PM.


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