Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Display/Hide Fields using radio buttons

Reply
Thread Tools

Display/Hide Fields using radio buttons

 
 
DettCom
Guest
Posts: n/a
 
      09-29-2004
Hello,

I would like to be able to display or hide fields based on whether a
specific Yes/No radio button is selected. This is in conjunction with
a posting a just made here in the same group related to checkboxes.

Thanks!!!
 
Reply With Quote
 
 
 
 
Stuart Palmer
Guest
Posts: n/a
 
      09-29-2004
You can do this with divs and showing and hiding the divs as required based
on the radios selected.
I do this all the time with stuff I do for work.

Stu

"DettCom" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) om...
> Hello,
>
> I would like to be able to display or hide fields based on whether a
> specific Yes/No radio button is selected. This is in conjunction with
> a posting a just made here in the same group related to checkboxes.
>
> Thanks!!!



 
Reply With Quote
 
 
 
 
DettCom
Guest
Posts: n/a
 
      09-29-2004
Stuart, thanks for the reply. However, that is what I have been trying
with checkboxes (assume it is the same in theory). Here is the simple
code that i have been experiencing with:

<input type="checkbox"
onclick="if(document.all)del.style.display='none'" ">
<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>



For the life of me.... I cannot figure it out.


"Stuart Palmer" <(E-Mail Removed)> wrote in message news:<(E-Mail Removed)>...
> You can do this with divs and showing and hiding the divs as required based
> on the radios selected.
> I do this all the time with stuff I do for work.
>
> Stu
>
> "DettCom" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) om...
> > Hello,
> >
> > I would like to be able to display or hide fields based on whether a
> > specific Yes/No radio button is selected. This is in conjunction with
> > a posting a just made here in the same group related to checkboxes.
> >
> > Thanks!!!

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      09-29-2004
DettCom wrote on 29 sep 2004 in comp.lang.javascript:

> Stuart, thanks for the reply. However, that is what I have been trying
> with checkboxes (assume it is the same in theory). Here is the simple
> code that i have been experiencing with:
>
> <input type="checkbox"
> onclick="if(document.all)del.style.display='none'" ">
> <div id ="del">
> Your address <input type="text" name="address">
> ....the rest of the deleivery fields
> </div>


<input type="checkbox" checked
onclick="getElementById('del').style.display=
(this.checked)?'':'none'">


<div id ="del">
Your address <input type="text" name="address">
.....the rest of the deleivery fields
</div>

IE6 tested, cross browser suspected.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-30-2004
Evertjan. wrote:

[snip]
> <input type="checkbox" checked
> onclick="getElementById('del').style.display=
> (this.checked)?'':'none'">
>
>
> <div id ="del">
> Your address <input type="text" name="address">
> .....the rest of the deleivery fields
> </div>

[snip]

You should also play with the element's visibility attribute
to see if that suits your purpose too. If you set
display='none', the element takes up zero space on the page
and all the other elements whose position on the page is
based on the one you just hid will move (maybe quite a lot).
Similarly in reverse when you display it, both of which
can be quite disconcerting for users.

Using the visibility attribute, the element still takes up
room on the page so when you hide/reveal it, nothing moves
(well, sometimes things move a little bit in some browsers...).

Lastly, make sure your page still works with JavaScript
turned off - sometimes things are hidden using an in-line
stylen or CSS then revealed using JS to modify the style.
Users with JS turned of can't get to see the hidden do-dad.

Cheers, Rob.
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      09-30-2004
RobG wrote on 30 sep 2004 in comp.lang.javascript:
> Lastly, make sure your page still works with JavaScript
> turned off - sometimes things are hidden using an in-line
> stylen or CSS then revealed using JS to modify the style.
> Users with JS turned of can't get to see the hidden do-dad.


I don't agree completely.

If users want to have their JS turned off,
one should have them recognize what they miss,
not accommodate them with a subquality page,
unless you really need them as customers.


<noscript>
You silly ass!<br>
Without javascript this page is not what it should be<br>
Better look elswhere or change your ways
</noscript>

or

<div id='scripted'>
You silly ass!<br>
Without javascript this page is not what it should be<br>
Better look elswhere or change your ways
</div>
<script>
document.getElementById('scripted').style.display= 'none'
</script>


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

 
Reply With Quote
 
DettCom
Guest
Posts: n/a
 
      09-30-2004
Robert, that works!!! I have another posting that basically needs to
do the same thing, but will use a single checkbox. Can you help???

Thanks!!!





Robert <(E-Mail Removed)> wrote in message news:<(E-Mail Removed)>...
> In article <(E-Mail Removed) >,
> http://www.velocityreviews.com/forums/(E-Mail Removed) (DettCom) wrote:
>
> > I would like to be able to display or hide fields based on whether a
> > specific Yes/No radio button is selected. This is in conjunction with
> > a posting a just made here in the same group related to checkboxes.

>
>
> This javascript should help. The validation is very simple and there
> are a lot of alerts so you can follow what is happening.
>
> Robert
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Radio buttons</title>
>
> <style type="text/css">
> .formStyle {position:relative;}
> </style>
>
> <script type="text/javascript">
>
> function validate()
> {
>
> var x = document.forms["myForm"];
> var checkedButton;
>
> // Figure out which radio button was pressed
> checkedButton = findValue(x.receiveVia);
>
> var varName = x.theName.value;
> var varEmail = x.theEmail.value;
> var varAddress = x.theAddress.value;
>
> alert("checkedButton = " + checkedButton +
> " varName = " + varName +
> " varEmail = " + varEmail +
> " varAddress = " + varAddress);
>
> // I changed submitOK to a boolean variable.
> var submitOK = true;
>
> // Validate email: name and email
>
> if (checkedButton == "byEmail")
> {
> alert("verifying email fields.");
>
> if (varName == '')
> {
> alert("Please fill in your Name");
> submitOK = false;
> }
> if (varEmail == '')
> {
> alert("Please fill in Email");
> submitOK = false;
> }
> if (varAddress != '')
> {
> alert("Please erase the address field.");
> submitOK = false;
> }
>
> return submitOK;
>
> }
>
> // Validate print: name, email, and address
>
> else if (checkedButton=="printed")
> {
> alert("Verifying printed fields");
> // Error message should be in the order on the form
> if (varName.length == '')
> {
> alert("Please fill in your Name");
> submitOK = false;
> }
> if (varEmail == '')
> {
> alert("Please fill in Email");
> submitOK = false;
> }
> if (varAddress == '')
> {
> alert("You must enter your Address");
> submitOK = false;
> }
>
> return submitOK;
> }
> else
> {
> alert("You need to select either email or print.");
> return false;
> }
>
> }
>
> function showHidden(doWhat)
> {
> // Check if the getElementById method is available
> if (document.getElementById)
> {
> document.getElementById("field3").style.display = doWhat;
> }
> else if (document.all)
> {
> alert("Running an older version of IE.");
> document.all.field3.style.display = doWhat;
> }
> else
> { alert("Cannot change visibility of address field"); }
> }
>
> // See which radio button is selected and return its value
> function findValue(obj)
> {
> var i, theValue;
> theValue = null;
>
> for (i=0;i<obj.length;i++)
> {
> if (obj[i].checked == true)
> {
> theValue = obj[i].value;
> break;
> }
> }
>
> return theValue;
> }
> </script>
>
> </head>
>
> <body>
>
> <p>Please try out our form.</p>
>
> <form name="myForm"
> action="http://www.nonamedomain.com"
> method="POST"
> onsubmit="alert('submitting');return validate();">
> <p><input type="radio" name="receiveVia" value="printed"
> onclick="showHidden('');">&nbsp;Printed
> brochure</p>
> <p><input type="radio" name="receiveVia" value="byEmail"
> onclick="showHidden('none');
> document.forms['myForm'].theAddress.value = '';">&nbsp;Via
> Email</p>
> <p>Name:<br>
> <input type="text" name="theName" size="20"><br><br>
> Email:<br>
> <input type="text" name="theEmail" size="20"><br>
> <script type="text/javascript">
> // Only insert a div if we can change it
> if (document.getElementById || document.all)
> { document.write("<div id='field3' class='formStyle'>");}
> </script>
> Postal address:<br>
> <input type="text" name="theAddress" size="40">
> <script type="text/javascript">
> if (document.getElementById || document.all)
> { document.write("</div>");}
> </script>
> </p>
>
> <p><input type="submit"
> border="0"
> value="Submit form"
> width="75"
> height="17"
> ALT="Submit button"></p>
>
> </form>
>
> <script type="text/javascript">
> // In the case of a reload, the radio button may already be clicked.
> // This code needs to be after the form.
> var x = document.forms["myForm"];
> if (x.receiveVia[0].checked == true)
> { showHidden('');}
> else if (x.receiveVia[1].checked == true)
> { showHidden('none');}
> else
> { ;}
>
> </script>
> </body>
> </html>

 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      09-30-2004
On 30 Sep 2004 07:41:49 GMT, Evertjan. <(E-Mail Removed)>
wrote:

> RobG wrote on 30 sep 2004 in comp.lang.javascript:
>
>> Lastly, make sure your page still works with JavaScript
>> turned off - sometimes things are hidden using an in-line
>> stylen or CSS then revealed using JS to modify the style.
>> Users with JS turned of can't get to see the hidden do-dad.

>
> I don't agree completely.
>
> If users want to have their JS turned off,
> one should have them recognize what they miss,
> not accommodate them with a subquality page,
> unless you really need them as customers.


And if they have no control over the settings? What good does that do?

A page is hardly substandard if it just shows a few more elements than one
that is scripted. It is functional, and that is what matters!

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
Robert
Guest
Posts: n/a
 
      09-30-2004
(E-Mail Removed) (DettCom) wrote in message news:<(E-Mail Removed). com>...
> Robert, that works!!! I have another posting that basically needs to
> do the same thing, but will use a single checkbox. Can you help???


OK, the coding is vary similiar.

The code fragment accesses a true/false variable:
document.forms["myForm"].elements["receiveVia"].checked

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..formStyle {position:relative;}
</style>

<script type="text/javascript">

function validate()
{

var x = document.forms["myForm"];


var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

alert(
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if(x.elements["receiveVia"].checked)
{
alert("verifying email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else
{
alert("Verifying printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}

}

function showHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("field3").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}

function decideDisplay()
{
var x = document.forms["myForm"];
if (x.receiveVia.checked == true)
{ showHidden('none');
document.forms['myForm'].theAddress.value = '';
}
else
{ showHidden('');}
}

</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomain.com"
method="POST"
onsubmit="alert('submitting');return validate();">
<p><input type="checkbox"
name="receiveVia"
value=""
onclick="decideDisplay();">&nbsp;Via
email</p>
<p>Name:<br>
<input type="text" name="theName" size="20"><br><br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getElementById || document.all)
{ document.write("<div id='field3' class='formStyle'>");}
</script>
Postal address:<br>
<input type="text" name="theAddress" size="40">
<script type="text/javascript">
if (document.getElementById || document.all)
{ document.write("</div>");}
</script>
</p>

<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
decideDisplay();
</script>
</body>
</html>
 
Reply With Quote
 
Robert
Guest
Posts: n/a
 
      10-02-2004
RobG <(E-Mail Removed)> wrote in message news:<YxK6d.1504$(E-Mail Removed)>...

> You should also play with the element's visibility attribute
> to see if that suits your purpose too.



In this example, I use both the display and visibility attributes.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>CSS Display and Visibility</title>

<script type="text/javascript">

function validate(x)
{
var checkedButton;

// Figure out which radio button was pressed

checkedButton = findValue(x.receiveVia);

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (checkedButton == "byEmail")
{

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (checkedButton=="printed")
{
// Error messages should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function vanishHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("hideSpan").style.display = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.hideSpan.style.display = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}


function hideHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("vanishSpan").style.visibi lity = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.vanishSpan.style.visibility = doWhat;
}
else
{ alert("Cannot change display value of address field"); }
}

// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null;

for (i=0;i<obj.length;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}

return theValue;
}
</script>

</head>

<body>

<p>Please try out our form.</P>
<P>This form uses the CSS display
and visibility style attributes. When you click on the
radio button email, Javascript code uses the display attribute
property of hidden to exclude the address field from the display.
No space will be taken up in the window.
When you click on the no radio button, Javascript code uses the
visibility attribute property of none to make the literature
catagories invisible. Space will be taken up in the window.</p>

<form name="myForm"
action="http://www.notavalidurl.com"
method="GET"
onsubmit="return validate(document.forms['myForm']);">
<p>
<input type="radio"
name="receiveVia"
value="printed"
onclick="vanishHidden('');">
Printed brochure</p>
<p>
<input type="radio"
name="receiveVia"
value="byEmail"
onclick="vanishHidden('none');
document.forms['myForm'].theAddress.value = '';">
Via Email</p>
<p>Name:<br>
<input type="text"
name="theName"
size="20"><br><br>
Email:<br>
<input type="text" name="theEmail" size="20">
<br><br>
<span id="hideSpan">
Postal address:<br>
<input type="text" name="theAddress" size="40">
</span>
</p>
<p>
Do you wish to receive additional literature?
<br>
<input type="radio"
name="literature"
value="yes"
onclick="hideHidden('visible')";>&nbsp;Yes&nbsp;&n bsp;
<!-- use visibility. -->
<span id="vanishSpan">
<input type="checkbox"
name="gardening"
value"gardening">&nbsp;Gardening
<input type="checkbox"
name="kitchen"
value"kitchen">&nbsp;Kitchen
<input type="checkbox"
name="vacation"
value"vacation">&nbsp;Vacation
<!-- Just get it done. I know there are better ways. -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;
<input type="checkbox"
name="office"
value"office">&nbsp;Office
<input type="checkbox"
name="secondhome"
value"secondhome">&nbsp;Second Home
</span>

<br>
<input type="radio"
name="literature"
value="no"
onclick="hideHidden('hidden');
var d=document.forms['myForm'];
d.elements['gardening'].checked=false;
d.elements['kitchen'].checked=false;
d.elements['vacation'].checked=false;
d.elements['office'].checked=false;
d.elements['secondhome'].checked=false;">
No
</p>
<p><input type="submit"
border="0"
value="Submit form"
width="75"
height="17"
ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ vanishHidden('');}
else if (x.receiveVia[1].checked == true)
{ vanishHidden('none');}
else
{ ;}

if (x.literature[0].checked == true)
{ hideHidden('visible');}
else if (x.literature[1].checked == true)
{ hideHidden('hidden');}
else
{ ;}

</script>
</body>
</html>
 
Reply With Quote
 
 
 
Reply

Thread Tools

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 On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Created Radio Buttons displaying as if they were conventional buttons Dr. Leff Javascript 3 10-15-2007 09:47 PM
Created Radio Buttons displaying as if they were conventional buttons Dr. Leff Javascript 3 10-15-2007 05:18 AM
ASP.NET Reset Radio Button in a group of Radio Buttons Scott D Johnson ASP .Net 1 09-27-2006 10:38 PM
Dynamic radio buttons matrix using Struts Antonietta Tobito via JavaKB.com Java 2 02-02-2005 11:47 PM
Radio button List problem: How to find value of Radio button list's Selected Item using javascript?? Hiten ASP .Net Web Controls 1 05-26-2004 10:32 AM



Advertisments