Ajax form not working (jQuery – PHP) – Education Career Blog

jQuery:

$("#contact-us-form").submit(function () {
    var nameVal = $("inputname=name").val();
    var companyVal = $("inputname=company").val();
    var titleVal = $("inputname=title").val();
    var emailVal = $("inputname=email").val();
    var phoneVal = $("inputname=phone").val();
    var messageVal = $("inputname=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!

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;
});

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

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") {