PHP contact form not sending 'selectpicker' data

Question

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). The php_errorlog returns nothing from what I can see.

I'm new to PHP so please go easy on me.

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 = $("input#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'>&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 " + 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."; } ?> 

Answer 1

It's not working because you have used $('input#state').

Instead try

$('select#state').val();

or simply

$('#state').val();

For select picker

$('selectpicker#state').val();