Data submit with ajax get result but not contact form

Question

I have a online quiz by jQuery, I want once the user submit it, to send the results with the contact information's of the users to the moderator.

I make it work, sending the results information correctly, the problem is it doesn't send the user information.

I've been playing around with different solution's, I can manage or to have the user information or the results of the quiz, but not both at the same time !

Here is the "contact form":

<form action="submit.php" method="POST" id="form">

<label>Name</label>
<input name="name" placeholder="Type Here">

<label>Email</label>
<input name="email" type="email" placeholder="Type Here">

<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>

<input id="button" type="submit" value="Send" class="btnShowResult">

Here is the jQuery part about the ajax to send the data result of the quiz, the div #resultKeeper being the result I want to receive

$(function() {
  $('#form').on('submit',function(e) { e.preventDefault();
        $.ajax({
              url:'submit.php',
              type:'POST',
              data:{'results':$('#resultKeeper').html(),'subject':'Subject of your e-mail'},
              success:function() {
$('#responseMessage').html()
              }
        });
        return false;

  });
});

here is my PHP

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$results = $_POST['results'];
$formcontent="From: $name \n Message: $message \n Results: \n $results";
$recipient = "myemail@gmail.com";
$subject = "my subject";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
?>

If in the Jquery I change the

$(function() {
  $('#form').on('submit',function(e) 

by #button instead of #form, I receive the informations from the contact form, but not anymore from the results.

Also by keepin the #form, I receive the result of the quiz, and few value as the form content, but not the informations from the placeholder !, here is what I receive by email:

"
From:
 Message:
 Results:
 <div> Question 1 is true</div><div> Question 2 is false\</div><div> Question 3 is true\</div>\<div> Question 4 is false\</div>\<div> Question 5 is false\</div>\<div class=\"totalScore\">\<br>Your total score is 2 / 5\</div>\<div class=\"totalScore\">\<br>CONGRATULATION, YOUR LEVEL IS A1.1\</div
"

As we can see I have the From: and Message: appearing, but not the proper name and message that the user are writing .. .

Any help will be adorable !!

Here is the allcode of JSFiddle:

http://jsfiddle.net/ccwJJ/

Answer 1

You do not receive your form values in your php file when you make an ajax request, you have to explictly send them in the ajax request.

Consider below form

 <form action="submit.php">
    <input type="email" name="email" id="email"/>
    <input type="submit" value="send"/>  
 </form> 

Case 1 Normal way

When you submit the form normally, say hitting enter or on click you would receive the form values implicitly in your php file as $_POST['email] variable

 <?php $email = $_POST['email'] ; // valid ?>

Case 2 Ajax way

When you submit the form using ajax, You do not receive the form values implicitly in your php file since your ajax request does not know about your form elements, You have to send the values explicitly in the ajax request.

  $.post('submit.php',function(result){

          $('#responseMessage').html(result);
    });

   <?php $email = $_POST['email'] // error ?>  
   why? because you have not set the post variable email 

Then how to do it?

   var uemail = $("#email").val(); // get the email 
   // Set email and send it through ajax   
   $.post('submit.php',email:uemail,function(result){

          $('#responseMessage').html(result);
    });

   <?php $email = $_POST['email'] // works perfect ?>

So now change your form to this

 <form action="submit.php" method="POST" id="quesForm">
     <label>Name</label>
     <input name="username" type="text" placeholder="Type Here">
     <label>Email</label>
     <input name="email" type="email" placeholder="Type Here">
     <label>Message</label>
     <textarea name="message" placeholder="Type Here"></textarea>
     <input id="button" type="submit" value="Send" class="btnShowResult">
 </form>

Notice I have changed name='name' to name='username'and I suggest you to change id=form to some other name say id=quesForm. I have seen some browsers does not seem to work as expected when you use tags as id names and attributes as attribute values like you have done name=name and id=form

I suggest you to use $.post instead of $.ajax, It simplifies the things for you when you really require $.post

jQuery

$(function() {
   $('#quesForm').on('submit',function(e) { 
    e.preventDefault();
    // I am fetching the form values you could get them by other selectors too
    var uname = $("input[name=username]").val(); 
    var uemail = $("input[name=email]").val();
    var msg = $("textarea").val()
    $.post('submit.php',{username:uname,email:uemail,message:msg,results:$('#resultKeeper').html(),subject:'Subject of your e-mail'},function(result){
          // result variable contains your response text
          // I guess you trying to update your response 
         // notice I have used html(result) as you have just used html()
          $('#responseMessage').html(result);
    });
      // you dont require `return false`
      // you have already did it using e.preventDefault();
  });
}); 

php

<?php $name = $_POST['username'];
       $email = $_POST['email'];
       $message = $_POST['message'];
       $results = $_POST['results'];
       $results = strip_tags($results); // add this to remove html tags and all
       $formcontent="From: $name \n Message: $message \n Results: \n $results";
       $recipient = "thibault.rolando@gmail.com";
       $subject = "my subject";
       $mailheader = "From: $email \r\n";
       mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
       echo "Your email has been send, thank you";
 ?>

To remove html tags in php you have function named strip_tags();

Answer 2

You need to send the form data, plus your results string.

Try the following:

$(function() {


  $('#form').on('submit',function(e) { e.preventDefault();
        //grab the form data into array
        var formData = $('#form').serializeArray();
        //add your result and subject
        formData.push({ results:$('#resultKeeper').html(), subject:'Subject of your e-mail'});
        $.ajax({
              url:'submit.php',
              type:'POST',
              data:formData,
              success:function() {
                  $('#responseMessage').html()
              }
    });
    return false;

});

Answer 3

It is better to use following way for getting form input values:

var data = $('#yourformid').serielize();

You will get the data in serielize format and put it on ajax data param.