I'm trying to make my contact form send the selected option from the select menu. All of the input data is sending (name, phone, email, suburb, post code) but just not the select option (state).
HTML:
<pre lang="HTML"><form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="name" class="form-control" placeholder="Your Name *" name="name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="phone" class="form-control" placeholder="Your Phone Number *" name="phone" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" name="email" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="text" class="form-control" name="suburb" placeholder="Your Suburb *" id="suburb" required data-validation-required-message="Please enter your address.">
<p class="help-block text-danger"></p>
</div>
<div class="select">
<div class="col-sm-6">
<div class="form-group">
<select class="selectpicker" name="state" id="state" data-width="100%" data-height="100%" title="Choose State *" data-style="btn-primary">
<option value="QLD">QLD</option>
<option value="NSW">NSW</option>
</select>
</div>
</div>
</div>
<div class="right-form-column">
<div class="col-sm-6">
<div class="form-group">
<input type="number" class="form-control" name="postcode" placeholder="Post Code *" id="postcode" required data-validation-required-message="Please enter your post code.">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</div>
</form>
Javascript:
$(function() {
$("input,textarea,select").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
},
submitSuccess: function($form, event) {
$("#btnSubmit").attr("disabled", true);
event.preventDefault();
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var suburb = $("input#suburb").val();
var state = $(".selectpicker#state").val();
var postcode = $("input#postcode").val();
var message = $("textarea#message").val();
var firstName = name;
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././mail/contact_me.php",
type: "GET",
data: {
name: name,
phone: phone,
email: email,
suburb: suburb,
state: state,
postcode: postcode,
message: message
},
cache: false,
success: function() {
$("#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'>×")
.append("</button>");
$('#success > .alert-success')
.append("Your message has been sent. ");
$('#success > .alert-success')
.append('</div>');
$('#contactForm').trigger("reset");
},
error: function() {
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
$('#name').focus(function() {
$('#success').html('');
});
PHP:
<?php
if(empty($_GET['name']) ||
empty($_GET['phone']) ||
empty($_GET['email']) ||
empty($_GET['suburb']) ||
empty($_GET['state']) ||
empty($_GET['postcode']) ||
empty($_GET['message']) ||
!filter_var($_GET['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_GET['name'];
$phone = $_GET['phone'];
$email_address = $_GET['email'];
$suburb = $_GET['suburb'];
$state = $_GET['state'];
$postcode = $_GET['postcode'];
$message = $_GET['message'];
$to = 'myname@mydomain.com';
$email_subject = "P Services Contact Form: $name";
$email_body = "You have received a new message. \n\n".
" Here are the details:\n \nName: $name \n ".
"Email: $email_address\n Suburb: $suburb\n State: $state\n Post Code: $postcode\n Message \n $message";
$headers = "From: myname@mydomain.com\n";
$headers .= "Reply-To: $email_address";
if(mail($to,$email_subject,$email_body,$headers)){
echo "Mail sent successfully.";
}
else{ echo "Error.";
}
?>
What I have tried:
I've tried changing the select class, which didn't work.
I've also changed
var state = $(".selectpicker#state").val();
to:
var state = $("select#state").val();
and that didn't work either.