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>
[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>
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.
Robert said: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.checked == true)
{
theValue = obj.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('');"> Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('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>
<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>
RobG wrote on 30 sep 2004 in comp.lang.javascript:
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.
Robert, that works!!! I have another posting that basically needs to
do the same thing, but will use a single checkbox. Can you help???
RobG said:You should also play with the element's visibility attribute
to see if that suits your purpose too.
Want to reply to this thread or ask your own question?
You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.