ajax not calling php, php works when called directly

Question

I know this has been answered before, but I still can't seem to find a solution that works for me. I have a form submission that is not working with the ajax call. I'm pretty sure its not the HTML or PHP, because If i execute the php directly, everything works fine. when going through ajax however, I get the console log messages, and the success block is executed, but I never get an email. any help would be much appreciated

my java script function

$('#ajax-contact').submit(function(event){

    console.log(event)
    event.preventDefault();
    var firstname = $('#fname');
    var lastname = $('#lname');
    var subject = $('#subject');
    var body = $('#body');

    console.log(firstname);
    console.log(lastname);
    console.log(subject);
    console.log(body);
    $.ajax({
        method: "POST",
        URL: "send_mail.php",
        data: "firstname=" + firstname + "&lastname=" + lastname + "&subject=" + subject + "&body=" + body,
        success: function(){
            $("#ajax-contact").trigger("reset");
             window.alert("Message Successfully Sent");
        }
    });
});

and the php file

<?php

$to = "xxxxxxx";
$subject  = $_POST["subject"];
$body = "Message from ".$_POST["firstname"]." ".$_POST["lastname"]." \r\n ".$_POST['body'];
if (mail($to, $subject, $body)) {
echo('Email successfully sent!');
return("success");
} else {
echo('Error Failed...');
return("Error");
}

?>

next time check the developer tools in your browser to see if its even making a network request. — castis
– castis, Commented Jun 21, 2018 at 19:48
You need to change to json data and no url query content its a bad practice. — Ulises
– Ulises, Commented Jun 21, 2018 at 19:49
yeah Its making the network request, and like I said in the post, It is returning the success block message so I have to think its executing without anything really bad happening — Zach Butcher
– Zach Butcher, Commented Jun 21, 2018 at 20:03
You need to encode the data parameters properly in case they contain special characters. The best way to do that is to pass an object, which jQuery will encode automatically. If not, you need to call encodeURIComponent(body). — Barmar
– Barmar, Commented Jun 21, 2018 at 20:07

Barmar · Accepted Answer · 2018-06-21 20:30:28Z

1

The data needs to be encoded properly in case it contains special characters that affect parsing it (this is especially likely in the body parameter). Either use the serialize() method to get all the inputs from the form:

data: $(this).serialize(),

or pass an object, which jQuery will serialize automatically:

data: { firstname: firstname, lastname: lastname, subject: subject, body: body},

In ES6 you can simplify that to:

data: {firstname, lastname, subject, body},

answered Jun 21, 2018 at 20:30

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ajax not calling php, php works when called directly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related