Question

This is probably a very easy one to answer but still getting my head around structuring functions and bits in jQuery (and jquerytools). I’ve managed to parse the form and receive an email from the script but instead of displaying an alert box I would like to display another small div with a thank you message for X number of seconds before it closes the divs, clears the form and goes back to the main page.

Here’s the code I’m running:

<script> 
jQuery(document).ready(function() {
  jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',} );
            jQuery('#form').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 

});
</script>

<div class="home-block">
  <div class="home-block-content">
    <div class="home-block-col1">
      <h2>call us</h2>
      why not call our friendly designers or let us call you... <span class="callus">0845 6808107</span><br>
      <a href="#" rel="#callback" class="simpledialog">request a call back</a></div>
    <div class="home-block-col2"><a href="#" rel="#callback" class="simpledialog"><img src="{{skin url=""}}images/media/callus.png" border="0" alt="call us"  /></a></div>
  </div>
  <div class="clear-block"><br>
  </div>
</div>
<div class="simple_overlay" id="callback"> Please enter your details and we will call you back...<br />
  <br />
  <form id="form" name="form" method="post" action="{{skin url=""}}forms/callbackscript.php">
    <div class="callback-label">Name:</div>
    <div class="callback-field">
    <input name="name" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Phone Number:</div>
    <div class="callback-field">
    <input name="phone" type="text" size="25" class="callback-input"></div><div class="clear-block"></div>
    <div class="callback-label">Callback time*:</div>
    <div class="callback-field">
    <select name="howsoon" class="callback-select">
    <option value="ASAP">As soon as possible</option>
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    </select></div><div class="clear-block"></div>
    <div class="callback-label">Your Question:</div>
    <div class="callback-field">
      <textarea name="question" cols="27" rows="3" class="callback-input"></textarea><div class="clear-block"></div>
    </div>
<div class="callback-label"></div><div class="callback-field">
<input type="submit" name="Submit" value="Submit" />
  </form></div><div class="clear-block"></div>
<div class="note">*Please note we can only call back between the hours of 8-5 Monday-Friday and 9-1 on Saturday</div>
<div class="clear-block"></div>
</div>

Answer 1

You could do something like this using the jQuery UI:
(It is assumed that you would have a div with id “message” where the thank you message would be placed)

<script> 
    jQuery(document).ready(function() {
        jQuery ("a[rel]").overlay({mask: {color: '#000', loadSpeed: 200,opacity: 0.5}, top: '25%',} );
        jQuery('#form').ajaxForm(function() { 
            jQuery("#message").html("Thank you for your comment!"); //see footnote 
            jQuery("#message").show("blind",null, 1000,function(){
                setTimeout(close_message,10000);
            });
        }); 
    });

    function close_message() {
        jQuery('#message').hide("blind",null,1000,function(){
           window.location("<url to the home page>");//see footnote 2
         });
    }
</script>

The show() and hide() methods provide nice animations. Otherwise, you could just as easily change the class of the div to something that is visible.

footnote 1 – You might want to consider taking the return data from the AJAX request and using it to populate the message, in case of errors.

footnote 2 – I couldn’t tell from your post whether the “home screen” was another page on your site or another configuration (i.e. different divs) of the same page. Either way, the code to send the user “somewhere else” should go here in the hide() callback. This ensures that it is run when the animation finishes.