validate and submit, no page refresh

validate and submit, no page refresh

Hi guys,

I am trying to find a particular tutorial on the web that I used to create a REALLY simple script that made use of jquery.form and jquery.validate.

The script would use the simple validate command to validate inline, then when submitted, a loading graphic would appear, call upon the php script referenced in the form action, process, then spit out a message on the same page without any refresh.

Can anyone point me to something this simple elsewhere? I have a few questions about modifying it.. unless you guys can help me?

Here's the script.. noting that Im also calling jquery.validate and jquery.form:

// form validation and ajax submitter.
jQuery(function() {
      // show a simple loading indicator
      var loader = jQuery('<div id="loader"><img src="images/contact/loader.gif" alt="loading..." /></div>')
         .css({position: "relative", top: "0px", left: "0px"})
         .appendTo("#formConfirmation")
         .hide();
      jQuery().ajaxStart(function() {
         loader.show();
      }).ajaxStop(function() {
         loader.hide();
      }).ajaxError(function(a, b, e) {
         throw e;
      });
      
      var v = jQuery("#contact").validate({
         submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
               target: "#formConfirmation"
            });
         }
      });
   });



I would like to have the message that appears, to fade out after being displayed for 5 seconds. I don't know how or where to add the fadeout command in the function above.

Id be really appreciative if you could point me to a simple, similar ajax submit and validate inline without page refresh tutorial, or help with the fade out!?

Cheers,

Scott