0

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.";
}        
?>
lmach8
  • 9
  • 2

1 Answers1

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();
Saravanan Sampathkumar
  • 3,201
  • 1
  • 20
  • 46
  • Thanks, seems pretty obvious in hindsight. I also had to change the select class though from 'selectpicker' to just 'select'. The only problem is that removes the styling selectpicker gave me. Is there a simple way I can incorporate it back in? – lmach8 Jan 24 '17 at 04:13
  • I don't get it? You are getting this working only when you remove selectpicker class? – Saravanan Sampathkumar Jan 24 '17 at 04:14
  • Yeah but I just figured it out. This seems to work: `$('selectpicker#state').val();` Not sure why I didn't try that before. Thanks for pointing me in the right direction. – lmach8 Jan 24 '17 at 04:20