Question

I have three forms on one page – “callback”, “contact us” and “newsletter subscription”.

Each has it’s own jQuery function to “post” the data (using .post) and then display any returned PHP. These forms only output simple error and successes depending on the form and the process.

Now, here is where it gets a bit odd… all three of my forms work but only two work as expected:

1. Response DIV hides
2. Response DIV fills with returned HTML
3. Response DIV fades in nicely.

My main “contact us” form, however, is the odd one out… the response DIV immediately appears with no fade effects.

I have read that I should first “hide()” the DIV – which I have tried without any success and nothing seems to work.

I have noticed that if I return purely text (echoed by PHP) then the fade works…. but when I try to get it to output any HTML tags then it all fails and the DIVs appear immediately…

My Form response:

<div><span id="contactUsAjaxResponse"></span><div>

My jQuery function

$(document).ready(function(){
$("#contactUsForm").submit(function(){
var responseDiv = '#contactUsAjaxResponse';
// add ajax-loader class to response div
$(responseDiv).html('').addClass('ajax-loader');
// get form actiom
var formAction = $(this).attr('action');
$.post(formAction, $("#contactUsForm").serializeArray(), function(data){
$(responseDiv).removeClass('ajax-loader').html(data).fadeIn('slow');
});
return false; //prevent default form action
});
});

Any echoed HTML is <php echo '<div class="error">Content...</div>'; ?> etc.

I have a feeling it could be my CSS (could any display: block; or other entries be causing the problem?)

Many Thanks

Answer 1

The best way (imo) is to have the result-div (that you call error) already present on your webpage. Hide it with css using display: none and make it empty. When the result is retreived, use fadeIn(‘slow’) on that element.

The base line is that there is no point in hiding a div using js, and then show it later. This can simply be done using css