473,234 Members | 1,628 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,234 software developers and data experts.

Radio Button Unique Validation and Redirect

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
8 4566
JosAH
11,448 Expert 8TB
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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

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

Similar topics

10
by: DettCom | last post by:
Hello, I would like to be able to display or hide fields based on whether a specific Yes/No radio button is selected. This is in conjunction with a posting a just made here in the same group...
8
by: David Cameron | last post by:
I noticed that using an HTMLInputRadioButton and specifying a value to be an empty string (""), this is overridden by ASP.Net which set the value of the control to be the same as the ID of the...
6
by: Blinky | last post by:
Hi all, I have a dynamically generated page that can have 1 or more radio buttons. I am using javascript with onsubmit in the form statement to make sure a radio button is selected before...
9
by: wreed | last post by:
I have a for loop seen below.... var the_form = document.getElementById(formName); for(var i=0; i<the_form.length; i++) { var temp = the_form.elements.type; if (temp == "radio") { for (x =...
1
by: Jerim79 | last post by:
I have a simple 3 page registration form. One form, one "data validation" script and one "insert into database" script. The customer bounces back and forth from the form to the verification script...
5
by: swatidesai0407 | last post by:
hi im validating radio buttons i create dis radio button in php based on some how many records of my query. i wrote a javascript to validate this buttons. wat i do is dat wen no radio button...
0
by: Gary W. Smith | last post by:
Hello, I have a simple form with a radio button group on it and I need to do some basic validation based upon which button is checked. Here is a little more detail. if button one is...
4
by: pureadrenaline | last post by:
Hey Guys, Please could anyone help me out with the following form I need to create a validation on the email field only if the user checked the radio button named Email. Thanks in advance. ...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.