>
Here is another version of file.
I have made a few revisions to the file. I added support for older
versions of IE and I put the div tag in the document only when I am
able to modify the div. I changed to the submit onsubmit event
handler. I found netscape 4.x didn't like onclick. I changed the
action to a dummie site.
Robert
<html>
<head>
<title>Radio buttons</title>
<style type="text/css">
..formStyle {position:relative; visibility:visible;}
</style>
<script type="text/javascript">
function validate()
{
// You need a var before a variable to make it local to this
// function. Without the var keyward, the variable is global.
// It is a good practice to minimize global variables.
var x = document.forms["myForm"];
// I find starting the varible with var... is confusing, but
// I left them as is. It is easy to forget to declare them.
var varCheckedButton;
// Figure out which radio button was pressed
if (x.receiveVia[0].checked == true)
{ varCheckedButton = x.receiveVia[0].value;}
else if (x.receiveVia[1].checked == true)
{ varCheckedButton = x.receiveVia[1].value;}
else
{ varCheckedButton = '';}
var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;
alert("varCheckedButton = " + varCheckedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);
// I changed submitOK to a boolean variable.
var submitOK = true;
// Validate email: name and email
if (varCheckedButton == "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 (varCheckedButton=="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.visibility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.visibility = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
</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();">
<!-- semicolons (;) are recommended in event handlers like onclick -->
<p><input type="radio" name="receiveVia" value="printed"
onclick="showHidden('visible');"> Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('hidden');
document.forms['myForm'].theAddress.value = '';"> Via
Email</p>
<!-- I like to use component names to avoid conflicts with
reserved words. -->
<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>
<!-- Netscape 4.x doesn't seem to support the onclick event
handler, so I moved the checking code to the form
onsubmit. Netscape doesn't support the alt tag. -->
<p><input type="image" src="submit.gif" border="0" value="Submit"
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('visible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hidden');}
else
{ ;}
</script>
</body>
</html>
