php - 提交后隐藏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();
        });
    });
});