提交后隐藏 html 表单 - Hide html form after submission?

我有一个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>

我想知道的是提交表单后如何隐藏表单。

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

尝试

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