Question

I’m using bitrepository.com great AJAX Form which utilizes jQuery and PHP: http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html

I’d like the error and validation DIV which appear after click to fade in.

Added the following jQuery code but to no avail (also tried with the click/change functions):

$(document).ready(function(){
    if ($('.notification_error').length > 0) {
        $('.notification_error').fadeTo("slow", 1.0);
    }
});

Any help would be great…

Answer 1

Given that your code look exactly like the one you have referenced, you could change your ajax-complete callback to this:

$("#note").ajaxComplete(function(event, request, settings){  

   if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
   {
      result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
      $("#fields").hide();
   }
   else
   {
      result = msg;
   }
   /* Hide the element, alter the content, and then fade it in */
   $(this).hide().html(result).fadeIn("slow"); 
});

This would fade in both error- and success-messages.

Update:

To only fade the element in the first time, you could replace the last line with something like this:

if ($(".notification_error, .notification_ok", this).length === 0) {
    $(this).hide().html(result).fadeIn("slow"); 
} else {
    $(this).html(result);
}

What we do is that we check if there is a en element with either class notification_error or notification_ok. If not (the first time) we fade it in, otherwise we just update the content.