I have a loading message and a success message that I want to fade in and fade out before the form gets submitted. I can't really get the code right to show these messages for a couple of seconds then submit the form as usual with Ajax. I have tried to connect the submit button like this.
jQuery(document).ready(function (e) {
jQuery( "#submitbutton" ).click(function() {
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
jQuery("form[id=postorder]").submit();
}, 4000);
});
});
Or this, this just an example, I have tried a few.
jQuery(document).ready(function (e) {
jQuery("form[id=postorder]").submit({
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
[Submit form here]
}, 4000);
});
});
The messages works fine. Grateful for any help!