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

April 27th, 2004, 03:28 AM
|
Registered User
|
|
Join Date: Apr 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|

April 27th, 2004, 09:39 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
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?
|

April 27th, 2004, 09:40 AM
|
Friend of Wrox
|
|
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
|
|
Are you trying to display/hide the form fields, or just enable/disable them?
HTH,
Snib
<><
|

April 28th, 2004, 03:59 AM
|
Registered User
|
|
Join Date: Apr 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
  
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
|

April 28th, 2004, 04:35 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
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?
|

April 28th, 2004, 08:09 PM
|
Registered User
|
|
Join Date: Apr 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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!
|

May 21st, 2007, 12:57 AM
|
Authorized User
|
|
Join Date: May 2007
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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?
|

May 21st, 2007, 01:01 AM
|
Authorized User
|
|
Join Date: May 2007
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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?
|

May 21st, 2007, 01:35 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
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.
|

March 14th, 2008, 11:41 AM
|
Registered User
|
|
Join Date: Mar 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
|
 |