Question

我使用了本教程中的确切文件：http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ ideea是提交表单而不刷新，并在提交后显示一个漂亮的动画。但是当我尝试将这些文件用于我的个性化表单时，动画在Chrome和Opera上不起作用。为什么呢？

<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

在这个小提琴中一切正常：

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

适用于Firefox和Chrome。我没有使用你的PHP，因为我没有访问它。相反，我正在通过jsfiddle进行虚拟ajax调用，但结果应该是相同的。

我唯一能看到的是你没有包含runOnLoad的代码。如果您包含代码，或删除runOnLoad()电话，一切正常。无论如何，这段代码已经过时了，因为jQuery可以为我们做到这一点。你只需要移动这一行：

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

到jQuery代码块的顶部：

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

使用jQuery的HTML5表单在Chrome和Opera上不起作用

1 个答案: