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

Leave a Comment