View Full Version : Need Help on Radio Buttons

11-18-2010, 11:37 PM
I'm Confused.

<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="left">
<h1>Insurance Details</h1>
<label>Type of Cover:</label>
<span class="gender-missing"><br />Please select your gender.<br /></span>
<input class="radio" id="gender" name="gender" type="radio" value="Male" />&nbsp;Male&nbsp;&nbsp;
<input class="radio" id="gender" name="gender" type="radio" value="Female" />&nbsp;Female&nbsp;&nbsp;


$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var digitNum = /^([0-9])/;

var num1 = document.getElementById('tel');
var num2 = document.getElementById('mobile');
var email = document.getElementById('email');
var dollarUnit = document.getElementById('amount_cover');
var gender = document.getElementsById('gender');

if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false))
} else {$('.gender-missing').hide();}
if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false))
} else {$('.smoke-missing').hide();}
if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false))
} else {$('.residency-missing').hide();}

if (!filter.test(email.value)) {
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
} else {$('.name-missing').hide();}
if (document.cform.address.value == "") {
} else {$('.address-missing').hide();}
if (!digitNum.test(num1.value)) {
} else {$('.tel-missing').hide();}
if (!digitNum.test(num2.value)) {
} else {$('.mobile-missing').hide();}
if (!digitNum.test(dollarUnit.value)) {
} else {$('.cover-missing').hide();}
if (document.cform.message.value == "") {
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){
return false;

if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form

//show the loading bar

//send the ajax request

//return the data
//hide the graphic

//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000);
setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900);

//stay on the page
return false;
//only need force for IE6
"height": document.documentElement.clientHeight

mail.php code:
//declare our variables

$coverType = $_POST['coverType'];
$coverRequired = $_POST['coverRequired'];
$amount_cover = $_POST['amount_cover'];
$terms = $_POST['terms'];
$message = stripslashes(nl2br($_POST['message']));

$name = $_POST['name'];
$gender = $_POST['gender'];
$status = $_POST['status'];
$Birth_month = $_POST['Birth_month'];
$days = $_POST['days'];
$years = $_POST['years'];
$smoke = $_POST['smoke'];
$residency = $_POST['residency'];

$email = $_POST['email'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$mobile = $_POST['mobile'];

//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "Message from Your Website";
$body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message";

$headers = 'From: '.$email.'' . "\r\n" .
'Reply-To: '.$email.'' . "\r\n" .
'Content-type: text/plain; charset=utf-8' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

//put your email address here
mail("me@myemail.com", $subject, $body, $headers);
<!--Display a thankyou message in the callback -->
<div id="mail_response">
<h3>Thank you for your interest <?php echo $name ?>!</h3><br />
<p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p>
<br /><br />
<h5>Message sent on: </h5>
<p><?php echo $todayis ?></p>

Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that?
for live demo: http://gbv.lifeandhealthbenefits.com/
for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js

Old Pedant
11-19-2010, 12:10 AM
var gender = document.getElementsById('gender');

There is no such method as that, with the s in it.


You are getting the wrong gender because, apparently, jQuery isn't as smart as it should be.

It is not realizing that this code:


should get the value of the CHECKED radio button.

I know how to fix that with regular JS, but maybe an experienced jQuery user can tell us the right way to fix it with jQuery.

11-19-2010, 02:38 AM
I get the code form Joren (http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition) I just added some radio button make it slide sideways.

Regarding the line:

var gender = document.getElementByIds('gender'); already replace it already to:

var gender = document.getElementById('gender'); -->
the without "S" but still i'm not getting the right value in my Radio buttons.

Now even I delete this line:

var gender = document.getElementById('gender'); -->
Before I get the right value but now i'm not getting the right value in my Radio buttons. Now I'm really confuse. Maybe there's something wrong with my codes. Anybody Help!

Philip M
11-19-2010, 07:44 AM
You are using gender both as the name of an HTML element and a Javascript global variable. Same with email. That will cause IE to barf.

11-19-2010, 09:13 AM
Yes, I finally got it working! For radio buttons, we need to get the elements and add the values of the checked ones.

var par_data = document.getElementById('r1').value;
var test = document.getElementsByName('gender2');

if((document.cform.gender2[0].checked== false)&&(document.cform.gender2[1].checked== false))
} else {$('.gender-missing').hide();
for (i = 0; i < test.length; i++) {
if (test[i].checked) par_data = test[i].value;