Question

这是jQuery提交表单代码。我想知道的是，如何在成功提交后使表单淡出，并在提交表单淡出后显示消息。此时按摩显示在结果div中，表格保持不变。提前致谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
    <head>
        <title>JQuery Form Example</title> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#myform").validate({
                debug: false,
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    name: "Please let us know who you are.",
                    email: "A valid email will help us get in touch with you.",
                },
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    $.post('process.php', $("#myform").serialize(), function(data) {
                        $('#results').html(data);
                    });
                }
            });
        });
        </script>
        <style>
        label.error { width: 250px; display: inline; color: red;}
        </style>
    </head>
    <body>
    <form name="myform" id="myform" action="" method="POST">  
    <!-- The Name form field -->
        <label for="name" id="name_label">Name</label>  
        <input type="text" name="name" id="name" size="30" value=""/>  
        <br>
    <!-- The Email form field -->
        <label for="email" id="email_label">Email</label>  
        <input type="text" name="email" id="email" size="30" value=""/> 
        <br>
    <!-- The Submit button -->
        <input type="submit" name="submit" value="Submit"> 
    </form>
    <!-- We will output the results from process.php here -->
    <div id="results"><div>
    </body>
    </html>

process.php

<?php
    print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

Answer 1

修改：

$.post('process.php', $("#myform").serialize(), function(data) {
  $('#results').html(data);
});

要：

$.post('process.php', $("#myform").serialize(), function(data) {
  $("#myform").fadeOut('fast', function(){
    $('#results').html(data);
  });
});

您可以为fadeOut方法指定回调函数，此处我们淡出表单，并在回调表单中使用新数据更新结果div。

jQuery提交表单淡出

1 个答案: