Receiving empty email from contact form

Hello please i need help i am receiving empty email below this is the email:

Name:

Subject:

Email:

Mobile:

Country:

Message:

This is the html code

<div class="contact-form">
                             <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
                                <div class="form-group">
                                <label>Department</label> <select name="dept" class="form-control">
                                        <option value="sales">Sales</option>
                                        <option value="support">Support</option>
                                </select>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Name" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" placeholder="Email" required><br>
                                    <input type="phone" name="phone" class="form-control" placeholder="Phone" required>
                                    <label>Country</label> <select name="country" class="form-control">
                                        <option value="Lebanon">Lebanon</option>
                                        <option value="Iraq">Iraq</option>
                                        <option value="Jordan">Jordan</option>
                                        <option value="Other">Other</option>
                                </select>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="subject" class="form-control" placeholder="Subject" required>
                                </div>
                                <div class="form-group">
                                    <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
                                </div>
                                <input type="hidden" name="browser_check" value="false" />
                                <button type="submit" value="submit" class="btn btn-primary">Send Message</button>
                                <button type="reset" class="btn btn-primary">Clear</button>
                            </form>
                        </div>

This is the JS code

// Contact form  - 
        var form = $('#main-contact-form');
    form.submit(function(event){
        event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            beforeSend: function(){
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
            }
        }).done(function(data){
            form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
        });
    });

This is the PHP CODE

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$depts = $_POST['dept'];
$name = $_POST['name'];
$mobile = $_POST['phone'];
$email = $_POST['email'];
$country = $_POST['country'];
$subject = $_POST['subject'];
$msg = $_POST['message'];


$message = "Name: $name\n
" .
        "Subject: $subject\n
" .
        "Email: $email\n
" .
        "Mobile: $mobile\n
" .
        "Country: $country\n
" .
        "Message:\n
" .
        "$msg";


$headers = "MIME-Version: 1.0" . "\\r\ ";
$headers .= "Content-type:text/html; charset=utf-8" . "\\r\ ";
$headers .= "FROM: <$email>" . "\\r\ ";

$sales_address = "josephhajjassaf@gmail.com";
$support_address = "iosephos@hotmail.com";


if ( $depts == "sales")        $to     =   $sales_address;
elseif ( $depts == "support")  $to     =   $support_address;
else                                $to     =   $sales_address;

  
$success = mail($to, $subject, $message, $headers); //This method sends the mail.
    echo "Your email was sent!"; // success message

die;
}
?>

Please i need help.

You are missing the data property which contains your form data.
http://api.jquery.com/jquery.ajax/ (scroll down to the Examples, it is in the first example)

Hello @cpradio thanks for the help,

I added this code below to the ajax, when i click the send button i receive the email with all the info but it also take me to the .php page not showing the messages when done in the ajax code .
data: { id : menuId },
dataType: “html”

Hmm… be sure that you pass all of the data. As that will be necessary.

The following article (http://blog.teamtreehouse.com/create-ajax-contact-form) does it using (outside of $.ajax)

var formData = $(form).serialize();

then have in the $.ajax

data: formData

As for it submitting the actual form and navigating to your PHP script, maybe @fretburner or @James_Hibbard will have ideas. As I thought event.preventDefault() was meant to prevent that…

Hey iosephos,

A couple of quick questions:

  • Is your path to jQuery correct, and are you loading it before your JS?
  • Are you getting any JS errors in your browser’s console?

at this point in execution, javascript has no idea what form_status is. For that matter, why store this as a variable at all? Stick the empty DIV into your HTML, and use the javascript only to populate/show/hide it.

$(‘.form_status’).html(“Do A Thing”);

Sorry guy for my late reply, but i took my dad to hospital…

in my browser console using firebug, i am getting this:

SyntaxError: missing } after property list
beforeSend: function(){

Again sorry for the late reply…

what do you mean by this ?

Here’s the JS I’m using on my machine to test this - the form is working as it’s supposed to:

var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: form.serialize(),
        beforeSend: function(){
            form.prepend(
                form_status
                    .html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>')
                    .fadeIn()
            );
        }
    }).done(function(data){
        form_status
            .html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>')
            .delay(3000)
            .fadeOut();
    });
});

@fretburner

Hello bro, thanks for the help i put what you did in the code and its working prefect !

Thank you so much, and of course a big thanks to the forum :smiley:.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.