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="JavaS cript">
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(bo x) {
var radio = validateButton( box.OPTION);
if (radio == null) alert('Please select an option to continue! ');
if (box.OPTION.RB1 .checked)
box.redirect.va lue="http://www.mywebsite.c om/A-page.html";
if (box.OPTION.RB2 .checked)
box.redirect.va lue="http://www.mywebsite.c om/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 : FF0000"
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 : FF0000"
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]
8 4613 JosAH 11,448
Recognized Expert MVP
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 16,027
Recognized Expert Moderator MVP
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.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.
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.
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 16,027
Recognized Expert Moderator MVP
Try the following for your validateButton function: - function validateButton(radio) {
-
for (var i=0; i < radio.length; i++) {
-
if (radio[i].checked) {return true;}
-
}
-
return false;
-
}
then in your validateForm function: - if (validateButton(box.OPTION)) {
-
//set the backgroundColor to E2E2E2 (using the inline code)
-
} else {
-
//set to red
-
}
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 16,027
Recognized Expert Moderator MVP
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=javascrip t]
JavaScript code here...
[/code]
[CODE=html]
HTML code here...
[/code]
I think I got it now. Your coaching has been greatly appreciated. Thank you for your time and your efforts.
acoder 16,027
Recognized Expert Moderator MVP
No problem, you're welcome.
Glad to hear that you got it working. Post again if you have any more questions.
Sign in to post your reply or Sign up for a free account.
Similar topics |
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 related to checkboxes.
Thanks!!!
|
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 control.
See the code below
* Page.aspx:
<%@ Page language="c#" Codebehind="Test.aspx.cs" AutoEventWireup="false"
Inherits="Webspace.Test" %>
|
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 allowing the page to be submitted. At the moment
it only works when there is 2 or more radio buttons on the page.
How can I get the radio button validation working when there is only 1 radio
on the page ?
|
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 = 0; x < the_form.elements.length - 1; x++)
{
|
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 until
the data is all correct. (When I say bounces, I mean logically. All the
customer ever sees is the registration form, plus or minus error
messages.)
The problem I am having, is that if verification fails, the customer is
redirected to the...
| |
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 are selected it should giv message dat select a radio button.
else it should go to other page.
My code works fine when there are more than 1 radio button
but when only 1 radio button is der dat time it does not work
|
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 selected, then we want to do validation on textbox
control one and no validation on textbox two. If button two is
selected, then we want to do validation on textbox control two and no
validation on textbox one.
|
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.
<form action="" method="get">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |