使用jQuery单击表单提交后显示加载gif [英] Show loading gif after clicking form submit using jQuery

问题描述

我试图在表单提交后简单地显示加载gif。我的代码无法正常加载gif显示。你会看到我的图片为gif设置为 visibility：hidden 。

 < script src =js / jquery-1.11.1.min.js>< / script> 
 
< div class =style =width：480px; margin：0 auto; margin-top：20px; ID = form_wrapper > 
< img src =img / loader.gifid =gifstyle =display：block; margin：0 auto; width：100px; visibility：hidden;> 
< div class =fadeid =form> 
< form action =process_login.phpmethod =POSTname =simpleloginid =login_form>< br /> 
< label for =用户名>& nbsp;名：其中/标签> 
 < label for =password>& nbsp;密码：其中/标签> 
 < input class =load_buttontype =submitname =submitid =submitvalue =Submitplaceholder =Submit> 
< / form> 
< / div> 
< / div> 
< div class =fifty>< / div> 
 
< script type =text / javascript> 
 $（'。load_button'）。submit（function（）{
 $（'＃gif'）。show（）; 
 return true; 
}）; 
< / script> 
  

解决方案

方法仅影响显示 CSS设置。如果你想设置可见性，你需要直接进行。此外， .load_button 元素是一个按钮，不会引发 submit 事件。您需要将您的选择器更改为表单才能生效：

  $（'＃login_form'）。submit（function（）{
 $（'＃gif'）。css（'visibility'，'visible'）; 
}）; 
  

I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to visibility: hidden.

<script src="js/jquery-1.11.1.min.js"></script>

<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
    <img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
    <div class="fade" id="form">
        <form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
            <label for="username">&nbsp; Username:</label>
            <input type="username" name="username" id="username" size="30" required><br><br>
            <label for="password">&nbsp; Password:</label>
            <input type="password" name="password" id="password" size="30" required><br><br>
            <input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
        </form>
    </div>
</div>
<div class="fifty"></div>

<script type="text/javascript">
    $('.load_button').submit(function() {
        $('#gif').show(); 
        return true;
    });
</script>

解决方案

The show() method only affects the display CSS setting. If you want to set the visibility you need to do it directly. Also, the .load_button element is a button and does not raise a submit event. You would need to change your selector to the form for that to work:

$('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
});

这篇关于使用jQuery单击表单提交后显示加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！