Question

I’ve used the exact files from this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
The ideea is to submit the form without refreshing, and displaying a nice animation after submission.
But when I try to use the files for my personalised form, the animation doesn’t work on Chrome and Opera. Why?

<div id="contact_form">
    <form name="contact" method="post" action="">
        <p>Hi, my name is</p>
        <input type="text" name="name" id="name" class="input" size="20" value="" class="text-input" />

        <p> and my email is</p> 
        <input type="text" name="email" id="email" class="input" size="20" value="" class="text-input"/> 

        <p>More Random Text.</p> 
        <textarea name="message" id="message" class="input" onfocus="this.value='';" class="text-input"> ... </textarea>

        <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </form>
</div>

Answer 1

Everything works ok in this fiddle:

http://jsfiddle.net/CTGa3/2/

Works in Firefox and Chrome. I am not using your php because I don’t have access to it. Instead, I am doing a dummy ajax call via jsfiddle, but the result should be the same.

The only thing I could see is that you didn’t include the code for runOnLoad. If you include the code, or remove the runOnLoad() call, everything works fine. That piece of code is outdated anyway, because jQuery can do that for us. You just have to move this line:

$("input#name").select().focus();

To the top of your jQuery code block:

http://jsfiddle.net/CTGa3/3/