Ajax form not working (jQuery - PHP)

Question

jQuery:

$("#contact-us-form").submit(function () {
    var nameVal = $("input[name=name]").val();
    var companyVal = $("input[name=company]").val();
    var titleVal = $("input[name=title]").val();
    var emailVal = $("input[name=email]").val();
    var phoneVal = $("input[name=phone]").val();
    var messageVal = $("input[name=message]").val();
    $.post("mailer.php", {
        name: nameVal,
        company: companyVal,
        title: titleVal,
        email: emailVal,
        phone: phoneVal,
        message: messageVal
    }, function (data) {
        alert("Data Loaded: " + data);
        $('#thanks').show();
    });
    return false;
});

mailer.php:

<?php

if(isset($_POST['submit'])) {

    $to = "[email protected]";
    $subject = "Inquiry";
    $name = $_POST['name'];
    $company = $_POST['company'];
    $title = $_POST['title'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    $body = <<<HEREDOC
        From: $name
        Company: $company
        Title: $title 
        E-Mail: $email
        Phone: $phone \n
        Message: $message 
HEREDOC;

    echo 'success';
    mail($to, $subject, $body);

} else {
    echo "failure";
}

?>

The data alert on the page returns failure, I don't understand why!

Thanks for your help!

Answer 1

It looks to me as if you're not sending a value for "submit" to mailer.php, so your condition is failing.

Answer 2

Looking at the data you are passing into your mail.php via JS, you have not passed in "submit" which is where you are basing your condition.

I would suggest that you pass in something like:

    $.post("mailer.php", { 
            name: nameVal, 
            company: companyVal, 
            title: titleVal, 
            email: emailVal, 
            phone: phoneVal, 
            message: messageVal,
action: "send-email"
        }, function (data) { 
            alert("Data Loaded: " + data); 
            $('#thanks').show(); 
        });

and in your PHP change the condition to:

if($_POST['action'] == "send-email") {   

Answer 3

Maybe $_POST['submit'] doesn't exist ?

Answer 4

Two things, first the main issue is there is no submit variable you're passing (if there's a submit button it is not serialized like it would be in a normal post), so you have to add it. Also, you can really shorten you code by using .serialize() to serialize the <form> here, like this:

$("#contact-us-form").submit(function () {
  $.post("mailer.php", $(this).serialize(), function (data) {
    alert("Data Loaded: " + data);
    $('#thanks').show();
  });
  return false;
});

To add your submit variable in there just use .serializeArray() and add it in, do this:

$("#contact-us-form").submit(function () {
  var fdata = $(this).serializeArray();
  fdata.push({ name: 'submit', value: true });
  $.post("mailer.php", fdata, function (data) {
    alert("Data Loaded: " + data);
    $('#thanks').show();
  });
  return false;
});