My form always sends the first option

Issue

I have a very simple HTML form. The form is connected to a PHP file so it emails the results to me. But I have a problem with radio buttons. No matter what radio button the user selects, the email always says that the user selected the first radio button.

I've done some research and I think I need to write "echo $gender;" in the PHP file somewhere. I've tried this and Dreamweaver always marks it as a syntax error.

Here is the essential code:

HTML:

<form>
<input type="radio" name="gender" id="gender" value="female" /> Female<br>
<input type="radio" name="gender" id="gender" value="male" checked /> Male<br>
</form>

Javascript:

$(function() {
$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        // Prevent spam click and default submit behaviour
        $("#btnSubmit").attr("disabled", true);
        event.preventDefault();

        // get values from form
        var gender = $("input#gender").val();

        $.ajax({
            url: "././mail/contact_me.php",
            type: "POST",
            data: {gender: gender},
            cache: false,
            success: function() {
                // Enable button & show success message
                $("#btnSubmit").attr("disabled", false);
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry, it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});

PHP:

<?php   
$gender = $_POST['gender'];
// Create the email and send the message
$to = 'me@myemailaddress.com'; 
$email_subject = "New message from contact form";
$email_body = "Gender: $gender \n\nPress 'reply' to respond to the sender.";
$headers = "From: me@myemailaddress\n";
return true;            
?>

Solution

I guess you meant jQuery instead of PHP. Also, what you are looking for is:

<form>
    <input type="radio" name="gender" class="gender" value="female" /> Female<br>
    <input type="radio" name="gender" class="gender" value="male" checked /> Male<br>
</form>

var gender = $("input.gender:checked").val();

What I did is change the id # to a class .. I added a :checked to your jQuery selector so it will always get the selected item.

Good luck!

Answered By - Peter