提交後隱藏html表單嗎？

Question

我有一個HTML表單發佈到一個php腳本，然後通過電子郵件發送表單內容。 我也使用JavaScript表單驗證和一些jquery ajax，以便頁面不重新加載。

HTML -

<form action="mail.php" class="contactus" onsubmit="return ValidateRequiredFields();" name="contactus" method="POST"> 
<p class="floatleft" style="width:200px; background-color:#FF0000; line-height:50px; margin:0; padding:0;">Nameeeeee</p> <input class="sizetext" type="text" maxlength="10" name="name"> 
<div style="clear:both"></div> 
<p class="floatleft" style="width:200px;">Email</p> <input class="sizetext" type="text" maxlength="10" name="email"> 
<div style="clear:both"></div> 
<p class="floatleft" style="width:200px;">Telephone</p> <input class="sizetext" type="text" maxlength="10" name="telephone"> 


<p>Priority</p> 
<select name="priority" size="1"> 
<option value="Low">Low</option> 
<option value="Normal">Normal</option> 
<option value="High">High</option> 
<option value="Emergency">Emergency</option> 
</select> 

</select> 
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br /> 

<br /> 
<input class="buttonstyle" type="submit" value="Send"> 
</form> 

    <div id="formResponse"> 
     </div> 

PHP -

<?php $name = $_POST['name']; 
$email = $_POST['email']; 
$priority = $_POST['priority']; 
$message = $_POST['message']; 
$telephone = $_POST['telephone']; 
$formcontent="From: $name \n Email: $email \n Telephone Number: $telephone \n Priority: $priority \n Message: $message"; 
$recipient = "myemailaddress"; 
$subject = "Contact Form"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
echo "Thank You!"; 
?> 

表單驗證和Ajax -

<script type="text/javascript" language="JavaScript"> 


var FormName = "contactus"; 



var RequiredFields = "name,email,priority,message"; 



function ValidateRequiredFields() 
{ 
var FieldList = RequiredFields.split(",") 
var BadList = new Array(); 
for(var i = 0; i < FieldList.length; i++) { 
    var s = eval('document.' + FormName + '.' + FieldList[i] + '.value'); 
    s = StripSpacesFromEnds(s); 
    if(s.length < 1) { BadList.push(FieldList[i]); } 
    } 
if(BadList.length < 1) { return true; } 
var ess = new String(); 
if(BadList.length > 1) { ess = 's'; } 
var message = new String('\n\nThe following field' + ess + ' are required:\n'); 
for(var i = 0; i < BadList.length; i++) { message += '\n' + BadList[i]; } 
alert(message); 
return false; 
} 

function StripSpacesFromEnds(s) 
{ 
while((s.indexOf(' ',0) == 0) && (s.length> 1)) { 
    s = s.substring(1,s.length); 
    } 
while((s.lastIndexOf(' ') == (s.length - 1)) && (s.length> 1)) { 
    s = s.substring(0,(s.length - 1)); 
    } 
if((s.indexOf(' ',0) == 0) && (s.length == 1)) { s = ''; } 
return s; 
} 
// --> 
</script> 

    <script type="text/javascript"> 

      $(document).ready(function() { 

       $(".contactus").submit(function() { 

        $.post("mail.php", $(".contactus").serialize(), 

         function(data) { 
          $("#formResponse").html(data); 
         } 
        ); 
        return false; 
       }); 
      }); 
     </script> 

我想知道的是如何隱藏表單提交表單後。

Answer 1

$(".contactus").on('submit', function() { 
    $this = $(this); 
    $.post("mail.php", $(".contactus").serialize(), function(data) { 
     $("#formResponse").html(data); 
     $this.hide() 
    }); 
    return false; 
}); 

或者你可以嘗試：

$(document).ready(function() { 
    $(".contactus").on('submit', function(e) { 
     e.preventDefault(); 
     $this = $(this); 
     $.ajax({ 
      type: 'POST', 
      url: "mail.php", 
      data: $(".contactus").serialize() 
     }).done(function() { //done will only hide if the submit is successful, using always instead will alway hide the form 
      $this.hide(); 
     }); 
    }); 
}); 

Answer 2

嘗試

$('form.contactus').submit(function() { 
    $(this).hide(); 
});