Enable / Disable Form Fields Automatically

jackyam · April 27th, 2004, 03:28 AM

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

Imar · April 27th, 2004, 09:39 AM

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?

Snib · April 27th, 2004, 09:40 AM

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

HTH,

Snib

<><

jackyam · April 28th, 2004, 03:59 AM

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

Imar · April 28th, 2004, 04:35 AM

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?

jackyam · April 28th, 2004, 08:09 PM

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!

abc052107 · May 21st, 2007, 12:57 AM

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?

abc052107 · May 21st, 2007, 01:01 AM

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?

Imar · May 21st, 2007, 01:35 AM

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.

Dylan1968 · March 14th, 2008, 11:41 AM

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