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

Question

Thanks for taking the time to see guys. I am creating a nice basic AJAX contact form using jQuery. The email is sent, but after opening the email there is no POST data, so I just get the lines defined in the PHP script. On my email client over the phone, the contents of the letter literally say "undefined". I tried to add different types of header data to no avail, as well as a number of options for the PHP mail () function.

I am more than ready to make an easier decision for a simple form of AJAX, therefore, 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> 

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

PHP script (external file "email.php"):

 <?php if($_POST){ $name = $_POST['form_name']; $email = $_POST['form_email']; $message = $_POST['form_msg']; //send email mail(" [e-mail] ", "This is an email from:" .$email, $message); } ?> 

Answer 1

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

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

Answer 2

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 your form input names are the same.

Answer 3

You are using the wrong message parameters:

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

The javascript / html identifiers are not related to the actual POST, especially when you create your own data string and do not use the same identifiers.

Answer 4

You are using the wrong parameter name, try:

 if($_POST){ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['text']; //send email mail(" [e-mail] ", "51 Deep comment from" .$email, $message); } 

Answer 5

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

PHP:

 <?php if($_POST){ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['text']; //send email mail(" [e-mail] ","My Subject:",$email,$message); } ?> 

Answer 6

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(" [e-mail] ", "51 Deep comment from" .$email, $message); } ?>