Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help on Radio Buttons

    I'm Confused.
    My HTML:

    <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>
    <label>Gender:</label>
    <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;

    Script.js:

    $('.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))
    {$('.gender-missing').show();
    } else {$('.gender-missing').hide();}
    if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false))
    {$('.smoke-missing').show();
    } else {$('.smoke-missing').hide();}
    if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false))
    {$('.residency-missing').show();
    } else {$('.residency-missing').hide();}

    if (!filter.test(email.value)) {
    $('.email-missing').show();
    } else {$('.email-missing').hide();}
    if (document.cform.name.value == "") {
    $('.name-missing').show();
    } else {$('.name-missing').hide();}
    if (document.cform.address.value == "") {
    $('.address-missing').show();
    } else {$('.address-missing').hide();}
    if (!digitNum.test(num1.value)) {
    $('.tel-missing').show();
    } else {$('.tel-missing').hide();}
    if (!digitNum.test(num2.value)) {
    $('.mobile-missing').show();
    } else {$('.mobile-missing').hide();}
    if (!digitNum.test(dollarUnit.value)) {
    $('.cover-missing').show();
    } else {$('.cover-missing').hide();}
    if (document.cform.message.value == "") {
    $('.message-missing').show();
    } 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
    $('.contactForm').hide();

    //show the loading bar
    $('.loader').append($('.bar'));
    $('.bar').css({display:'block'});

    //send the ajax request
    $.post('mail.php',{coverType:$('#coverType').val(),
    coverRequired:$('#coverRequired').val(),
    amount_cover:$('#amount_cover').val(),
    terms:$('#terms').val(),
    message:$('#message').val(),
    name:$('#name').val(),
    gender:$('#gender').val(),
    status:$('#status').val(),
    Birth_month:$('#Birth_month').val(),
    days:$('#days').val(),
    years:$('#years').val(),
    smoke:$('#smoke').val(),
    residency:$('#residency').val(),
    email:$('#email').val(),
    address:$('#address').val(),
    tel:$('#tel').val(),
    mobile:$('#mobile').val()},

    //return the data
    function(data){
    //hide the graphic
    $('.bar').css({display:'none'});
    $('.loader').append(data);
    });

    //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
    $("#backgroundPopup").css({
    "height": document.documentElement.clientHeight
    });

    mail.php code:
    <?php
    //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>
    </div>

    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
    Last edited by micdansan; 11-19-2010 at 12:03 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code:
    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:
    Code:
    gender:$('#gender').val(),
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I get the code form Joren I just added some radio button make it slide sideways.

    Regarding the line:
    Code:
    var gender = document.getElementByIds('gender');
    already replace it already to:
    Code:
     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:
    Code:
     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!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I finally got it working! For radio buttons, we need to get the elements and add the values of the checked ones.

    Code:
    		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))
    		{$('.gender-missing').show();
    		} else {$('.gender-missing').hide();
    			for (i = 0; i < test.length; i++) {
    		 		if (test[i].checked) par_data = test[i].value;
    			}
    		}


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •