Question

I have a simple contact form:

<div class="contact-wrapper">        
      <div class="grid_8 contact-form-wrapper">
        <form id="contactus" method="GET" action="">             
          <p><em>All fields are required unless otherwise noted.</em></p>
          <fieldset>
            <legend>Tell us about yourself</legend>
            <ol>
              <li>
                <label for="firstname" accesskey="f">First Name:</label>
                <input type="text" id="firstname" name="firstname" tabindex="1" value="" title="First Name" class="required">
              </li>
              <li>
                <label for="lastname" accesskey="l">Last Name:</label>
                <input type="text" id="lastname" name="lastname" tabindex="2" value="" title="Last Name" class="required">
              </li>
              <li>
                <label for="email" accesskey="e">E-mail Address:</label>
                <input type="text" id="email" name="email" tabindex="3" value="" title="E-mail Address" class="required">
              </li>
              <li>
                <label for="phone" accesskey="p">Phone Number: <em>Optional</em></label>
                <input type="text" id="phone" name="phone" tabindex="4" value="" title="Phone Number">
              </li>
            </ol>
          </fieldset>
          <fieldset>
            <legend>How can we help you?</legend>
            <ol>
              <li>
                <label for="comments" accesskey="y">Your Message:</label>
                <textarea name="comments" rows="10" cols="20" id="comments" class="word_count required" tabindex="5" title="Your Message"></textarea>
                <span class="counter">&nbsp;</span></li>
            </ol>
          </fieldset>
          <div class="captcha">Captcha space...</div>
          <button type="submit" value="Send Message" class="btn">Send Message</button>
        </form>
      </div>
      <div class="ty">Thank you for your message.</div>         
    </div>

And I’m validating it with the jQuery’s Validate plugin taken from MS: http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

The form validates fine, but I need to fade out the entire contact form and fade in the ‘Thank You’ container once all fields are valid and the submit button is pressed.

How do I do that? I would think I’m missing something or just plainly don’t know it :p

Here’s a DEMO in jsfiddle… although I don’t know why the form doesn’t validate correctly there, but it does work in my server.

I’m new to jQuery so all I’ve done so far is by reading and bumping my head into walls, so I apologize for any mistakes in advance.

Any help would be greatly appreciated.

Answer 1

UPDATE

The DEMO has been updated and code optimized, it works much better now.

—

Dmitriy, thanks for your help.

I used the jquery.forms plugin as you suggested but the code I used is a little different.

The Solution

As I said, I used the jquery.forms plugin to submit the form via Ajax. On submitting the form a DIV with a ‘loader’ or ‘spinner’ fades in (although the spinner image is not included in the demo), then it fades out and then the Thank You message fades in.

The reason for the loader is so that the user sees something ‘moving’ while the form is being submitted, this way the user doesn’t have to watch the screen doing nothing while the form is being processed. Nice usability touch.

In the demo, the loader appears very fast right below the button, so pay attention to that spot if you want to see it in action.

Gave you a vote though.

Thanks again.