Fade out message after 10 seconds, clearing the input elements using jQuery

Question

I'm displaying a message (#final_msg) after the user submits the form. What I want to do is that, after 15 seconds, the message (#final_msg) should fade out, clearing away [or fading out] the text in the input elements as well. Is it possible to do this?

else {
                        //create post data
                      var postData = { 
                        "name" : $("#name").val(),
                        "email" : $("#email").val(),
                        "msg" : $("#msg").val(),
                        "origin" : $("#origin").val()
                      };

                      //make the call
                      $.ajax({
                        type: "POST",
                        url: "test.php",
                        data: postData, //send it along with your call
                        success: function(response){
                            $('#final_msg').fadeIn();

                        }
                      });
                }

Answer 1

You should look into the JavaScript setTimeout() method. With it, you may execute some function after a specific number of milliseconds.

setTimeout(function(){$('#final_msg').fadeOut();}, 10000);

Besides the fading, you may clear all inputs in that function, e.g. by using $(':input').val("") and $(':input').removeAttr("checked") for radio buttons and checkboxes respectively (if there are any that is).

Answer 2

setTimeout(function() {
 $('#final_msg').fadeOut();
 $('#name, #email, #msg, #origin').val('')
}, 10000 );

Answer 3

If you're on jQuery 1.4, you can use the delay function:

$('#final_msg').fadeIn().delay(10000).fadeOut();