ATS said:
Please see my response to Mr. Winter. What's in the javascript file?
Here is an HTML file which shows two ways of hiding text.
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.visibility = 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
.checked == true)
{
theValue = obj.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')";> Yes
<!-- use visibility. -->
<span id="vanishSpan">
<input type="checkbox"
name="gardening"
value"gardening"> Gardening
<input type="checkbox"
name="kitchen"
value"kitchen"> Kitchen
<input type="checkbox"
name="vacation"
value"vacation"> Vacation
<!-- Just get it done. I know there are better ways. -->
<br>
<input type="checkbox"
name="office"
value"office"> Office
<input type="checkbox"
name="secondhome"
value"secondhome"> 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>
