通过$ post联系表单提交成功消息

Question

我很难获得提交表格的超级信息， 我一直在玩，当然也有点混乱。 。

我最后提到的是，一旦提交表格，使表格消失，并出现一条消息说明（祝贺，提交已经完成）

我的HTML：

<div class="questionContainer radius">
<div class="question"><b>Question 1:</b> Inside which HTML element do we put the JavaScript?</div>
<div class="answers">
    <ul>
        <li>
            <label><input type="radio" name="q1" id="q1-a" />&lt;js&gt;</label>
        </li>
        <li>
            <label><input type="radio" name="q1" id="q1-b" />&lt;script&gt;</label>
        </li>
        <li>
            <label><input type="radio" name="q1" id="q1-c" />&lt;scripting&gt;</label>
        </li>
        <li>
            <label><input type="radio" name="q1" id="q1-d" />&lt;javascript&gt;</label>
        </li>
    </ul>
</div>
<div class="btnContainer">
    <div class="next">
        <a class="btnNext">Next &gt;</a>
    </div>
    <div class="clear"></div>
</div>
</div>
 <div class="questionContainer hide radius">
<div class="question"><b>Question 2:</b> What is the correct JavaScript syntax to write "Hello World"?</div>
<div class="answers">
    <ul>
        <li>
            <label><input type="radio" name="q2" id="q2-a" />response.write("Hello World")</label>
        </li>
        <li>
            <label><input type="radio" name="q2" id="q2-b" />("Hello World")</label>
        </li>
        <li>
            <label><input type="radio" name="q2" id="q2-c" />"Hello World"</label>
        </li>
        <li>
            <label><input type="radio" name="q2" id="q2-d" />document.write("Hello World")</label>
        </li>
    </ul>
</div>
<div class="btnContainer">
    <div class="prev">
        <a class="btnPrev">&lt; Prev</a>
    </div>
    <div class="next">
        <a class="btnNext">Next &gt;</a>
    </div>
    <div class="clear"></div>
</div>
 </div>
 <div class="questionContainer radius hide">
<div class="question"><b>Question 3:</b> Where is the correct place to insert a JavaScript?</div>
<div class="answers">
    <ul>
        <li>
            <label><input type="radio" name="q3" id="q3-a" />Both the &lt;thead&gt; section and the &lt;body&gt; section are correct</label>
        </li>
        <li>
            <label><input type="radio" name="q3" id="q3-b" />The &lt;body&gt; section</label>
        </li>
        <li>
            <label><input type="radio" name="q3" id="q3-c" />The &lt;head&gt; section</label>
        </li>
    </ul>
</div>
<div class="btnContainer">
    <div class="prev">
        <a class="btnPrev">&lt;&lt; Prev</a>
    </div>
    <div class="next">
        <a class="btnNext">Next &gt;</a>
    </div>
    <div class="clear"></div>
</div>
</div>
<div class="questionContainer radius hide">
<div class="question"><b>Question 4:</b> What is the correct syntax for referring to an external script called "xxx.js"?</div>
<div class="answers">
    <ul>
        <li>
            <label><input type="radio" name="q4" id="q4-a" />&lt;script type="text/javascript" name="xxx.js"&gt;</label>
        </li>
        <li>
            <label><input type="radio" name="q4" id="q4-b" />&lt;script type="text/javascript" href="xxx.js"&gt;</label>
        </li>
        <li>
            <label><input type="radio" name="q4" id="q4-c" />&lt;script type="text/javascript" src="xxx.js"&gt;</label>
        </li>
    </ul>
</div>
<div class="btnContainer">
    <div class="prev">
        <a class="btnPrev">&lt; Prev</a>
    </div>
    <div class="next">
        <a class="btnNext">Next &gt;</a>
    </div>
    <div class="clear"></div>
</div>
 </div>
<div class="questionContainer radius hide">
<div class="question"><b>Question 5:</b> The external JavaScript file must contain the &lt;script&gt; tag?</div>
<div class="answers">
    <ul>
        <li>
            <label><input type="radio" name="q5" id="q5-a" />True</label>
        </li>
        <li>
            <label><input type="radio" name="q5" id="q5-b" />False</label>
        </li>
    </ul>
</div>



<div class="btnContainer">
    <div class="prev">
        <a class="btnPrev">&lt;&lt; Prev</a>
    </div>
  <div class="next">
        <a class="btnNext">Next!</a>
    </div>
    <div class="clear"></div>
</div>
</div>

 <div class="questionContainer radius hide">
 <form action="submit.php" method="POST" id="quesForm">
 <label>Name</label>
 <input name="username" type="text" placeholder="Type Here"><br/>
 <label>Email</label>
 <input name="email" type="email" placeholder="Type Here"><br/>
 <label>Phone</label>
 <input name="message" placeholder="Type Here">
 <input id="button"  type="submit" value="Send" class="btnShowResult" >
 </form>
  <div class="btnContainer">
    <div class="prev">
        <a class="btnPrev">&lt;&lt; Prev</a>
    </div>
    <div class="clear"></div>
    </div>
   </div>

<div id="responseMessage"> Your submission has been done, thank you</div>

<div class="txtStatusBar">Status Bar</div>
<div id="progressKeeper" class="radius">
<div id="progress"></div>
</div>
<div id="resultKeeper" class="radius hide"></div>
</div>

我的div为div：

#responseMessage{
display:none;}

这是我的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 = $("input[name=message]").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 Phone: $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";
 ?>

我尝试使用includinb一个div #responseMessage，其可见性：隐藏，但没有。 ..

非常感谢任何帮助，

非常感谢你！

Answer 1

你没有隐藏你的表格。你需要隐藏你的表格并在你的div中显示你的结果。您需要将id_of_your_form替换为表单的ID。

 $(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 = $("input[name=message]").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()
          $('#id_of_your_form').hide();
          $('#responseMessage').show();
          $('#responseMessage').html(result);

    });
      // you dont require `return false`
      // you have already did it using e.preventDefault();
    });
      });