使用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數據參數中。