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). I’ve also tried changing the select class, which didn’t work. The php_errorlog returns nothing from what I can see too.
Here is the Javascript and HTML
$(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 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; // For Success/Failure Message
// Check for white space in name for Success/Fail message
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() {
// 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'>×")
.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'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", 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");
});
});
// When clicking on Full hide fail/success boxes
$('#name').focus(function() {
$('#success').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>
<div class="col-md-6">
<div class="select">
<div class="col-xs-6">
<div class="form-group">
</form>
Here is the PHP
<?php
// check if fields passed are empty
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'];
// create email body and send it
$to = 'myname@mydomain.com'; // PUT YOUR EMAIL ADDRESS HERE
$email_subject = "P Services Contact Form: $name"; // EDIT THE EMAIL SUBJECT LINE HERE
$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.";
}
?>