Radio Button Unique Validation and Redirect

**JosAH** · Oct 19 '07, 08:20 PM

Sorry, this is a Javascript question. Javascript and Java are two diffferent beasts
no matter their name similarities. I'll move your question to a Javascript forum.
Best of luck and

kind regards,

Jos

**acoder** · Oct 20 '07, 11:01 AM

Welcome to TSDN!

Originally posted by photoboy

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.

Use document.getEle mentsByName("OP TION") to get the radio buttons and loop over and check their checked property. If none are checked, loop again to set the background color to red.

Originally posted by photoboy

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.

You will want to submit the data to the page which sends to your email first. Then when the email has been sent, the user can be redirected to the required page. This can be done in your Perl script.

**photoboy** · Oct 20 '07, 09:42 PM

Thank you for responding to my inquiry.

I kind of understand your logic in resolving the two issues, but you will have to forgive me...I am a real beginner at writing Javascript. The script I have already used was copied from a free script page and modified by me (obviously without complete success). I really have no idea how to implement your suggestions. Therefore, if it is not asking too much, could you hold my hand a bit here and show me?

Regarding the page redirect...I don't know what Perl is or how to use it. Isn't there some way to redirect the user in Javascript like I have suggested in lines 17 - 21? In line 29 I have set the form redirect value to "" so the value can be determined by Javascript when the appropriate radio button is selected. Is this logic flawed?

Thanks for your patience.

**acoder** · Oct 21 '07, 03:37 PM

Try the following for your validateButton function:
[CODE=javascript]function validateButton( radio) {
for (var i=0; i < radio.length; i++) {
if (radio[i].checked) {return true;}
}
return false;
}[/CODE]then in your validateForm function:
[CODE=javascript]if (validateButton (box.OPTION)) {
//set the backgroundColor to E2E2E2 (using the inline code)
} else {
//set to red
}[/CODE]

**photoboy** · Oct 21 '07, 08:05 PM

We are almost there. The radio button color change works perfectly. Thank you very much!

However, I am still having issues with the page redirect. When I click the CONTINUE button I should be redirected to page ‘A’ or page ‘B’ depending on which radio button was selected. Instead, nothing happens. At the same time, the form should be submitted to me in an e-mail, but no e-mail arrives. The e-mail should tell me which radio button option was selected.

If I use the following code separately from the radio button color change code, the page redirect and e-mail forwarding works fine. When I try to combine everything, something goes wrong. I have tried replacing OPTION[0] and OPTION[1] with OPTION.RB1 and OPTION.RB2 but that does not help. Any ideas?

[HTML]<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Radio Button Redirect</title>
<script language="Javas cript">
function redirectCheck()
{
if (box.OPTION[0].checked)
box.redirect.va lue="http://mywebsite.com/A-page.html";
if (box.OPTION[1].checked)
box.redirect.va lue="http://mywebsite.com/B-page.html";
return true

}
</script>
</head>
<body>
<form action="/cgi-bin/eform.pl" method="POST" name="box" enctype="applic ation/x-www-form-urlencoded">
<input type="hidden" name="recipient " value="info@myw ebsite.com">
<input type="hidden" name="subject" value="Radio Button Test">
<input type="hidden" name="redirect" value="">
<input type="radio" name="OPTION" id="RB1" value="A">A
<input type="radio" name="OPTION" id="RB2" value="B">B
<input type="submit" name="Submit" value="CONTINUE " onclick="return redirectCheck() ">
</form>
</body>
</html>
[/HTML]
Here is the combined code in which the radio button color change works, but where I am still having trouble making the redirect and e-mail forwarding work:

[HTML]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Radio Button Unique Validation and Redirect</title>
<script language="JavaS cript">
function validateButton( radio) {
for (var i=0; i < radio.length; i++) {
if (radio[i].checked) {return true;}
}
return false;
}
function validateForm(bo x) {
var radio = validateButton( box.OPTION);
if (validateButton (box.OPTION)) {
} else {
box.RB1.style.b ackgroundColor= 'FF0000';
box.RB2.style.b ackgroundColor= 'FF0000';
}
if (box.OPTION[0].checked)
box.redirect.va lue="http://mywebsite.com/A-page.html";
if (box.OPTION[1].checked)
box.redirect.va lue="http://mywebsite.com/B-page.html";
return true
}
</script>
</head>

<body>
<form action="/cgi-bin/eform.pl" name="box" method="POST" enctype="applic ation/x-www-form-urlencoded">
<input type="hidden" name="recipient " value="info@myw ebsite.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="#E2E2E 2">
<label for="RB1"><inpu t type="radio" name="OPTION" id="RB1" value="A" style="backgrou nd : E2E2E2"
onclick="this.s tyle.background Color='E2E2E2'; document.getEle mentById('RB2') .style.backgrou ndColor='E2E2E2 '; this.blur()" /> A</label></td>
</tr>
<tr>
<td bgcolor="#E2E2E 2">
<label for="RB2"><inpu t type="radio" name="OPTION" id="RB2" value="B" style="backgrou nd : E2E2E2"
onclick="this.s tyle.background Color='E2E2E2'; document.getEle mentById('RB1') .style.backgrou ndColor='E2E2E2 '; this.blur()" /> B</label></td>
</tr>
</table>
<p>
<input type="submit" value="CONTINUE " onclick="valida teForm(box); return false;">
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]

**acoder** · Oct 22 '07, 07:22 AM

In your submit button, remove the return false and use "return validateForm(bo x)" instead. In your validate function, where you're setting the background color to red, add a return false to prevent the form being submitted.

PS. use code tags when posting code:
[CODE=javas cript]
JavaScript code here...
[/CODE]

[CODE=ht ml]
HTML code here...
[/CODE]

**photoboy** · Oct 23 '07, 03:19 AM

I think I got it now. Your coaching has been greatly appreciated. Thank you for your time and your efforts.

**acoder** · Oct 23 '07, 07:32 AM

No problem, you're welcome.

Glad to hear that you got it working. Post again if you have any more questions.

Radio Button Unique Validation and Redirect

Radio Button Unique Validation and Redirect

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment