By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,248 Members | 882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,248 IT Pros & Developers. It's quick & easy.

Radio Button Unique Validation and Redirect

P: 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]
Oct 19 '07 #1
Share this Question
Share on Google+
8 Replies


Expert 10K+
P: 11,448
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
Oct 19 '07 #2

acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!
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.getElementsByName("OPTION") 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.
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.
Oct 20 '07 #3

P: 4
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.
Oct 20 '07 #4

acoder
Expert Mod 15k+
P: 16,027
Try the following for your validateButton function:
Expand|Select|Wrap|Line Numbers
  1. function validateButton(radio) {
  2.  for (var i=0; i < radio.length; i++) {
  3.   if (radio[i].checked) {return true;}
  4.  }
  5.  return false;
  6. }
then in your validateForm function:
Expand|Select|Wrap|Line Numbers
  1. if (validateButton(box.OPTION)) {
  2. //set the backgroundColor to E2E2E2 (using the inline code)
  3. } else {
  4.  //set to red
  5. }
Oct 21 '07 #5

P: 4
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="Javascript">
function redirectCheck()
{
if (box.OPTION[0].checked)
box.redirect.value="http://mywebsite.com/A-page.html";
if (box.OPTION[1].checked)
box.redirect.value="http://mywebsite.com/B-page.html";
return true

}
</script>
</head>
<body>
<form action="/cgi-bin/eform.pl" method="POST" name="box" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="recipient" value="info@mywebsite.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="JavaScript">
function validateButton(radio) {
for (var i=0; i < radio.length; i++) {
if (radio[i].checked) {return true;}
}
return false;
}
function validateForm(box) {
var radio = validateButton(box.OPTION);
if (validateButton(box.OPTION)) {
} else {
box.RB1.style.backgroundColor='FF0000';
box.RB2.style.backgroundColor='FF0000';
}
if (box.OPTION[0].checked)
box.redirect.value="http://mywebsite.com/A-page.html";
if (box.OPTION[1].checked)
box.redirect.value="http://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 : E2E2E2"
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 : E2E2E2"
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]
Oct 21 '07 #6

acoder
Expert Mod 15k+
P: 16,027
In your submit button, remove the return false and use "return validateForm(box)" 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=javascript]
JavaScript code here...
[/code]

[CODE=html]
HTML code here...
[/code]
Oct 22 '07 #7

P: 4
I think I got it now. Your coaching has been greatly appreciated. Thank you for your time and your efforts.
Oct 23 '07 #8

acoder
Expert Mod 15k+
P: 16,027
No problem, you're welcome.

Glad to hear that you got it working. Post again if you have any more questions.
Oct 23 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.