聯繫表格提交成功信息通過$ post

Question

我很難有提交表格的信息， 我一直在玩耍，確實有一種混亂。 。

我liek什麼是底，一旦提交表單，使窗體dissapear，並顯示一條消息instread說（恭喜，提交已完成）

我的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 + CSS：

#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替換id_of_your_form。

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