jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined

Question

Thanks for taking the time to look, guys. I'm creating a pretty basic AJAX contact form using jQuery. The email sends, but upon opening the email there is no POST data, so I just get the strings I defined in the PHP script. On my phone's email client, the content of the email literally says 'undefined'. I've tried adding different types of header data to no avail, and a number of variations on the PHP mail() function.

I am more than willing to adopt an easier solution for a simple AJAX form, so thanks in advance for any new approaches.

Here is the form:

   <section id="left">
      <label for="form_name">Name</label>
      <input name="form_name" id="form_name" type="text" >

      <label for="form_email">Email</label>
      <input name="form_email" id="form_email" type="email" >
   </section>

   <section id="right">
      <label for="form_msg">Message</label>
      <textarea name="form_msg" id="form_msg"></textarea>
      <input id="submit" class="button" name="submit" type="submit" value="Send">
   </section>

</form>

The jQuery AJAX:

$(function() {
    $("#contact .button").click(function() {
        var name = $("#form_name").val();
        var email = $("#form_email").val();
        var text = $("#msg_text").val();
        var dataString = 'name='+ name + '&email=' + email + '&text=' + text;

        $.ajax({
            type: "POST",
            url: "email.php",
            data: dataString,
            success: function(){
            $('.success').fadeIn(1000);
            }
        });

        return false;
    });
});

The PHP script (external file 'email.php'):

<?php
if($_POST){
    $name = $_POST['form_name'];
    $email = $_POST['form_email'];
    $message = $_POST['form_msg'];

//send email
    mail("[email protected]", "This is an email from:" .$email, $message);
}
?>

Seain Malkin · Accepted Answer · 2013-03-08 18:10:45Z

22

There is no need to make a query string. Just put your values in an object and jQuery will take care of the rest for you.

var data = {
    name: $("#form_name").val(),
    email: $("#form_email").val(),
    message: $("#msg_text").val()
};
$.ajax({
    type: "POST",
    url: "email.php",
    data: data,
    success: function(){
        $('.success').fadeIn(1000);
    }
});

answered Mar 8, 2013 at 18:10

Seain Malkin

2,29319 silver badges20 bronze badges

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

1 Comment

Jason Sears Over a year ago

I used this and it works well, in combo with altering my PHP script as defined by EmCO and Garis. Thanks all!

Jannie Theunissen · Accepted Answer · 2013-03-08 18:34:33Z

6

Leave your email.php code the same, but replace this JavaScript code:

 var name = $("#form_name").val();
        var email = $("#form_email").val();
        var text = $("#msg_text").val();
        var dataString = 'name='+ name + '&email=' + email + '&text=' + text;

        $.ajax({
            type: "POST",
            url: "email.php",
            data: dataString,
            success: function(){
            $('.success').fadeIn(1000);
            }
        });

with this:

    $.ajax({
        type: "POST",
        url: "email.php",
        data: $(form).serialize(),
        success: function(){
        $('.success').fadeIn(1000);
        }
    });

So that your form input names match up.

answered Mar 8, 2013 at 18:34

Jannie Theunissen

30.3k21 gold badges110 silver badges136 bronze badges

1 Comment

Scaraux Over a year ago

Place form under quotes in the jQuery selector

Marc B · Accepted Answer · 2013-03-08 18:08:21Z

4

You're using the wrong post parameters:

    var dataString = 'name='+ name + '&email=' + email + '&text=' + text;
                      ^^^^-$_POST['name']
                                       ^^^^--$_POST['name']
                                      etc....

The javascript/html IDs are irrelevant to the actual POST, especially when you're building your own data string and don't use those same IDs.

answered Mar 8, 2013 at 18:08

Marc B

362k44 gold badges433 silver badges508 bronze badges

1 Comment

Jason Sears Over a year ago

Thanks a lot, this in combination with the data hash worked perfectly!

Garis M Suero · Accepted Answer · 2013-03-08 18:14:54Z

3

You are using the wrong parameters name, try:

if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['text'];

//send email
    mail("[email protected]", "51 Deep comment from" .$email, $message);
}

answered Mar 8, 2013 at 18:14

Garis M Suero

8,1997 gold badges49 silver badges68 bronze badges

1 Comment

Jason Sears Over a year ago

Thanks a lot, this in combination with the data hash worked perfectly!

Hil · Accepted Answer · 2017-08-20 11:02:00Z

2

You code should be:

   <section id="right">
      <label for="form_msg">Message</label>
      <textarea name="form_msg" id="#msg_text"></textarea>
      <input id="submit" class="button" name="submit" type="submit" value="Send">
   </section>

Js

var data = {
    name: $("#form_name").val(),
    email: $("#form_email").val(),
    message: $("#msg_text").val()
};
$.ajax({
    type: "POST",
    url: "email.php",
    data: data,
    success: function(){
        $('.success').fadeIn(1000);
    }
});

The PHP:

<?php
if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['text'];

//send email
    mail("[email protected]","My Subject:",$email,$message);
}
?>

answered Aug 20, 2017 at 11:02

Hil

4295 silver badges10 bronze badges

Comments

emco · Accepted Answer · 2013-03-08 18:11:04Z

0

Your PHP script (external file 'email.php') should look like this:

<?php
if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['text'];

//send email
    mail("[email protected]", "51 Deep comment from" .$email, $message);
}
?>

answered Mar 8, 2013 at 18:11

emco

4,7593 gold badges21 silver badges20 bronze badges

1 Comment

Jason Sears Over a year ago

Thanks a lot, this in combination with the data hash worked perfectly!

Collectives™ on Stack Overflow

jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related