Paul Jones Paul Jones - 5 months ago 16
PHP Question

My form always sends the first option

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;
?>

Answer

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!