4
I have racked by brain long enough on this, so now I need the help of someone who knows what they are doing. Here is what I am trying to achieve:
First, I have two radio buttons (both unchecked) that need to be validated when the submit button is clicked. Instead of the standard alert window popping up (which I have now), I want the radio button background color to change from the table color (E2E2E2) to red (FF0000) for both buttons simultaneously. Then when either button is checked, the red background for both buttons changes back to the standard table color.
Secondly, (and I have not been able to get this to work at all) when a radio button is checked and the submit button is clicked, the viewer is redirected to web page ‘A’ for one radio button or web page ‘B’ for the other radio button. When the form is received in my e-mail, I can see which option was selected.
Thanks for your attention. I would appreciate any assistance.
This is what I have so far (please don’t laugh...I am a real beginner):
[HTML]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Radio Button Validation and Redirect</title>
<script language="JavaScript">
function validateButton(radio) {
var count = -1;
for (var i=radio.length-1; i > -1; i--) {
if (radio[i].checked) {count = i; i = -1;}
}
if (count > -1) return radio[count].value;
else return null;
}
function validateForm(box) {
var radio = validateButton(box.OPTION);
if (radio == null) alert('Please select an option to continue! ');
if (box.OPTION.RB1.checked)
box.redirect.value="http://www.mywebsite.com/A-page.html";
if (box.OPTION.RB2.checked)
box.redirect.value="http://www.mywebsite.com/B-page.html";
return true
}
</script>
</head>
<body>
<form action="/cgi-bin/eform.pl" name="box" method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="recipient" value="info@mywebsite.com">
<input type="hidden" name="subject" value="Radio Button Validation and Redirect">
<input type="hidden" name="redirect" value="">
<table align="center" width="200" border="0">
<tr>
<td align="center">
<table border="1" width="150">
<tr>
<td bgcolor="#E2E2E2">
<label for="RB1"><input type="radio" name="OPTION" id="RB1" value="A" style="background : FF0000"
onclick="this.style.backgroundColor='E2E2E2'; document.getElementById('RB2').style.backgroundCol or='E2E2E2'; this.blur()" /> A</label></td>
</tr>
<tr>
<td bgcolor="#E2E2E2">
<label for="RB2"><input type="radio" name="OPTION" id="RB2" value="B" style="background : FF0000"
onclick="this.style.backgroundColor='E2E2E2'; document.getElementById('RB1').style.backgroundCol or='E2E2E2'; this.blur()" /> B</label></td>
</tr>
</table>
<p>
<input type="submit" value="CONTINUE" onclick="validateForm(box); return false;">
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]
