javascript - 试图在表单提交上显示一个元素

Question

我试图在提交表单时显示 loader.gif 图像。

我的 loader.gif 在 CSS 中有 display:none，我想在提交表单时显示它。 我正在尝试使用下面的简单代码来执行此操作。

这对我来说似乎是正确的，但它不起作用。

你看到这里有什么不对吗？

jQuery:

$(function(){
    $('form').submit(function(){
        $('.loginbox h1 img').fadeIn('fast');
    });
});  

CSS:

.loginform h1 img {
    float:right;
    margin:7px 0;
    display:none;
}

HTML:

<h1>Login Form: <img src="img/loader.gif"/></h1>
<form name="login" action="" method="post">
    <label>
        <span>User:</span>
        <input type="text" name="user" />
    </label>

    <div class="label">
        <span>Pass:</span>
        <input type="password" name="pass" />
        <input type="submit" value="Login"/>
    </div>        
</form>

Answer 1

我想那是因为一旦提交，它就会回发或重新加载或重定向。

你可以这样做:

$(function(){
    $('form').submit(function(e){
        e.preventDefault(); // prevents submission
        $('h1 img').fadeIn('fast'); // since you aren't using that class
        $.ajax({ ... });  // use ajax to submit the form
    });
});