PHP AJAX contact form not sending drop down box options in email

Question

Trying to edit a contact form on an HTML theme and have been successful thus far except for "mydropdown" dropbox which is not populating correctly when data is entered in and submitted. What am I doing wrong here?

Here is the Ajax function in my home.js file:

// -------------------------------------------------------------
// Contact form
// -------------------------------------------------------------

//Ajax contact

    $(function() {
    $('#contact-form').submit(function() {
    var name = $('#name').val();
    var email =$('#email').val();
    var subject =$('#subject').val();
    var message =$('#message').val();
    var dates =$('#dates').val();
    var mydropdown =$('#mydropdown').val();
    var phone =$('#phone').val();
    var pet =$('#pet').val();
            $.ajax({
                type: 'POST',
                url: './sendemail.php',
                data: { name:name, email:email, subject:subject, pet:pet,
dates:dates, mydropdown:mydropdown, phone:phone, message:message  }
            });
            $('#contact-form').trigger('reset');
            $('.thank-you').addClass("show-on-success");
            return false;
        }); 
    });


 }); // end custom jQuery 

And Here is my php file "sendemail.php"

      <?php
      $name = $_POST['name'];
      $email = $_POST['email'];
      $message = $_POST['message'];
      $phone = $_POST['phone'];
      $pet = $_POST['pet'];
      $dates = $_POST['dates'];
      $mydropdown = $_POST['mydropdown']
     $formcontent="From: $name \n Phone: $phone \n Pet's Name: $pet \n
      Drop Off  Dates: $dates \n Location: $mydropdown \n 
              Services: $message";
                  $recipient = "alpham4le@gmail.com";
              $subject = "Contact Form";
                $mailheader = "From: $email \r\n";
   mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

      ?>

Here is my actual form in my index html file:

<!-- contact-form -->

                </div>
            </div><!-- /row -->

            <!-- row -->
            <div class="row">
                <div class="col-xs-12">
                    <!-- contact-form -->
                    <form id="contact-form" class="contact-form"
name="contact-form" method="post" action="#">
                        <div class="row">
                            <div class="form-group col-sm-6">
                                <input type="text" id="name" name="name"
required class="form-control wow fadeInUp" placeholder="Your Name">
                                <input type="text" id="phone" name="phone"
required class="form-control wow fadeInUp" placeholder="Your Phone Number">
                                <input type="text" id="email" name="email"
required class="form-control wow fadeInUp" placeholder="Your Email Address">
                                <input type="text" id="pet" name="pet"
required class="form-control wow fadeInUp" placeholder="Your Pet's Name">
                              <input type="text" id="dates" name="dates"
required class="form-control wow fadeInUp" placeholder="Drop Off Dates">

                            </div>
                            <select name="mydropdown">
                                 <option value="Location">Location</option>
                                <option value="Downtown">Downtown</option>
                                <option value="Valley">Valley</option>
                                                        </select>
                                                        <br />
                            <div class="form-group col-sm-6">
                                <textarea name="message" id="message"
required class="form-control wow fadeInUp" rows="30" placeholder="Services
you're interested in & any other questions.."></textarea>
                            </div>

                        <div class="form-group col-sm-12">
                            <h1 class="thank-you"><span>Thank you! Your mail
has been sent!</span></h1>                
                            <button type="submit" class="btn btn-angle wow
zoomIn">Submit Message</button>
                        </div>

                        </div>                                                 

                    </form> <!-- contact-form -->

What am I doing wrong here? I think it has something to do with the ajax form, everything else works fine just the Location: portion of the form is not sending any of the drop down options.

Answer 1

in jQuery you have a var var mydropdown =$('#mydropdown').val(); it binds with the id of the drop down and in your HTML you don't have the id="mydropdown"

<select name="mydropdown">
    <option value="Location">Location</option>
    <option value="Downtown">Downtown</option>
    <option value="Valley">Valley</option>
</select>

So should be

<select name="mydropdown" id="mydropdown">
    <option value="Location">Location</option>
    <option value="Downtown">Downtown</option>
    <option value="Valley">Valley</option>
</select>

Answer 2

Your select doesn't have an id set for it

<select name="mydropdown">

modify it to be

<select name="mydropdown" id="mydropdown">

Checking your console would have helped you out on this one.