By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,687 Members | 2,046 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,687 IT Pros & Developers. It's quick & easy.

Display/Hide Fields using radio buttons

P: n/a
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!!!
Jul 23 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
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" <sc***@dettcom.com> wrote in message
news:ca**************************@posting.google.c 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!!!

Jul 23 '05 #2

P: n/a
In article <ca**************************@posting.google.com >,
sc***@dettcom.com (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>
Jul 23 '05 #3

P: n/a
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" <tr**********@youcant.com> wrote in message news:<2s*************@uni-berlin.de>...
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" <sc***@dettcom.com> wrote in message
news:ca**************************@posting.google.c 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!!!

Jul 23 '05 #4

P: n/a
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)

Jul 23 '05 #5

P: n/a
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.
Jul 23 '05 #6

P: n/a
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)

Jul 23 '05 #7

P: n/a
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 <rc*******@my-deja.com> wrote in message news:<rc*****************************@news1.west.e arthlink.net>...
In article <ca**************************@posting.google.com >,
sc***@dettcom.com (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>

Jul 23 '05 #8

P: n/a
On 30 Sep 2004 07:41:49 GMT, Evertjan. <ex**************@interxnl.net>
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.
Jul 23 '05 #9

P: n/a
sc***@dettcom.com (DettCom) wrote in message news:<ca**************************@posting.google. 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>
Jul 23 '05 #10

P: n/a
RobG <rg***@iinet.net.auau> wrote in message news:<Yx*****************@news.optus.net.au>...
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>
Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.