CODEWITHSUNDEEP
jquery
maxlk
maxlk

Reputation: 1057

jQuery Submit Form Fade Out

this is jQuery submit form code. what i like to know is how can i make the form fade out after successful submission and the display the message after the the submission form fade out. at the moment the massage is displaying in results div with the form staying as it is. thanks in advance. 

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

Upvotes: 1

Views: 4977

Answers (1)

Sarfraz
Sarfraz

Reputation: 382806

Modify this:

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

To:

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

You can specify callback function to fadeOut method, here we fade out the form and in the callback form update results div with new data.

Upvotes: 2

Related Questions