Click here to Skip to main content
15,906,947 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
JavaScript
$(function() {

    $("input,textarea,select").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("Your message has been sent. ");
                    $('#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("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('');
});


PHP:
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.";
}        
?>


What I have tried:

I've tried changing the select class, which didn't work.

I've also changed
JavaScript
var state = $(".selectpicker#state").val();

to:
JavaScript
var state = $("select#state").val();

and that didn't work either.
Posted
Comments
SrikantSahu 28-Jan-17 9:26am    
I dont think you need var state = $(".selectpicker#state").val(); to pick the value...... Just var state = $("#state").val(); is sufficient to pick the value. You can log the values before posting or see the n/w tab in the chrome web developer tool; this will let you know whether the value is getting posted or not.
lmach 28-Jan-17 18:08pm    
Thanks Srikant. I just tried that but it still doesn't show up in my email. It shows in Query String Parameters that it's being posted though. I even deleted var state = $("#state").val(); altogether and it still said it was posted? If I link you to my site do you think you would be able to have a look at it for me please? I'm pretty new to all this.
lmach 29-Jan-17 2:01am    
Never mind actually, your solution worked in the end! After a bit of mucking around in the web developer tool I got it to work. Thanks!
SrikantSahu 29-Jan-17 9:20am    
Glad it worked. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900