使用 jQuery 单击表单提交后显示加载 gif答案

【问题标题】：Show loading gif after clicking form submit using jQuery使用 jQuery 单击表单提交后显示加载 gif
【发布时间】：2015-01-17 12:44:15
【问题描述】：

我试图在提交表单后简单地显示加载 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.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>

【问题讨论】：

根据 jQuery API api.jquery.com/submit 你的 input 元素不应该有 names 或 ids 像 submit
谢谢@RST，我会解决的。

标签： javascript jquery forms gif

【解决方案1】：

show() 方法只影响display CSS 设置。如果要设置可见性，则需要直接进行。此外，.load_button 元素是一个按钮，不会引发submit 事件。您需要将选择器更改为 form 才能正常工作：

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

另请注意，return true; 在您的逻辑中是多余的，因此可以将其删除。

【讨论】：

您也可以在提交前使用setTimeout() 暂停并显示gif 几秒钟。

【解决方案2】：

按钮输入没有提交事件。尝试将事件处理程序附加到表单：

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

【讨论】：

【解决方案3】：

仅使用 JS 的更好更简洁的示例

参考：TheDeveloperBlog.com

第 1 步 - 创建您的 java 脚本并将其放置在您的 HTML 页面中。

<script type="text/javascript">
    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'loading_bar.GIF';
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000';
        div.appendChild(img);
        document.body.appendChild(div);
        return true;
        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble = true;
        //e.stopPropagation();
    }
</script>

在您的表单中调用提交事件的 java 脚本函数。

<form runat="server"  onsubmit="ShowLoading()">
</form>

提交表单后不久，它会显示加载图像。

【讨论】：

这不会在表单返回后移除 Loading 横幅。
对我来说它有效。它确实删除了它，因为加载后，加载 div 不再存在。

【解决方案4】：

onclick 函数怎么样：

    <form id="form">
    <input type="text" name="firstInput">
    <button type="button" name="namebutton" 
           onClick="$('#gif').css('visibility', 'visible');
                    $('#form').submit();">
    </form>

当然你可以把它放在一个函数中，然后用 onClick 触发它

【讨论】：