使用ajax提交的数据获得结果，但没有联系表单

Question

我有一个jQuery的在线测验，我希望一旦用户提交了测验，就将结果以及用户的联系信息发送给主持人。

我可以正常工作，正确发送结果信息，问题是它不发送用户信息。

我一直在研究不同的解决方案，我可以管理或拥有用户信息或测验的结果，但不能同时使用两者！

这是“联系表格”：

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

这是关于ajax的jQuery部分，用于发送测验的数据结果，div #resultKeeper是我想要接收的结果

$(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;

  });
});

这是我的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";
?>

如果在Jquery中，我更改了

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

通过#button而不是#form，我从联系表中收到信息，但不再从结果中接收信息。

同样通过保持#form格式，我收到测验的结果，但作为表单内容的值很少，但没有收到占位符！的信息，这是我通过电子邮件收到的内容：

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

如我们所见，我出现了“发件人：”和“消息：”，但没有出现用户正在编写的正确名称和消息。

任何帮助将是可爱的！

这是JSFiddle的全部代码：

http://jsfiddle.net/ccwJJ/

Answer 1

发出ajax请求时，您不会在php文件中收到表单值，您必须在ajax请求中明确发送它们。

考虑以下形式

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

情况1正常方式

当您正常提交表单时，说按Enter或单击，您将在php文件中隐式接收$_POST['email]变量形式的表单值

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

案例2 Ajax方式

当您使用ajax提交表单时，由于您的ajax请求不了解表单元素，因此您不会在php文件中隐式接收表单值，您必须在ajax请求中显式发送这些值。

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

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

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

那该怎么办呢？

   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 ?>

所以现在将您的表格更改为此

 <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>

注意，我已将name='name'更改为name='username'并且建议您将id=form更改为其他名称，例如id=quesForm 。 我已经看到，当您使用标签作为id名称和属性作为属性值时，某些浏览器似乎无法正常工作，就像您完成name=name和id=form

我建议您使用$.post代替$.ajax ，当您确实需要$.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";
 ?>

要删除php中的html标签，您可以使用名为strip_tags();函数strip_tags();

Answer 2

您需要发送表单数据以及结果字符串。

请尝试以下操作：

$(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

最好使用以下方法获取表单输入值：

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

您将获得序列化格式的数据并将其放在ajax数据参数中。