jQuery提交表單淡出

這是jQuery提交表單代碼。我想知道的是，如何在成功提交後讓表單淡出並在提交表單淡出後顯示消息。此刻按摩在結果div中顯示，並保持原樣。提前致謝。jQuery提交表單淡出

<!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>"; 
?>

來源

2011-11-19 maxlk

修改此：

$.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方法，我們在這裏淡出形式和在th e回調形式更新結果div與新數據。

來源

2011-11-19 06:29:47 Sarfraz

工程就像一個魅力。非常感謝。 – maxlk

@maxlk：不客氣 – Sarfraz

jQuery提交表單淡出

回答

相關問題