【问题标题】：How to show loading-div after submitting a form with jQuery?使用 jQuery 提交表单后如何显示 loading-div？
【发布时间】：2014-06-16 13:50:20
【问题描述】：

我是 Javascript 和 jQuery 的新手。我想在用户提交表单后显示“loading-gif”，但不知道为什么我的代码不起作用。情况是这样的：

表单的 id="form"
loading-div 有 id="loading" 和 style="display:none"（当然还有其他一些）
提交按钮有 class="formtrigger"（并且没有 type="submit"）

这是我的javascript（在html页面底部的jquery之后初始化）：

    $('.formtrigger').click(function() {
      $('#loading').show();
      $('#form').submit();
    });

当我单击按钮时，表单已提交，但未出现 loading-div。我尝试了“$('#loading').show();”这一行没有将它绑定到点击事件上，它就起作用了。我也试过这段代码：

$('.formtrigger').click(function() {
    alert('blablabla');
    $('#form').submit();
});

这两种说法都奏效了！首先显示警报，然后提交表单。为什么其他代码不起作用？

提前致谢。

编辑：我也尝试了以下变体但没有成功

$('.formtrigger').click(function() {
    $('#form').submit();
});
$('#form').submit(function() {
    $('#loading').show();
});

和

$('.formtrigger').click(function() {
    $('#loading').show();
    window.setTimeout($('#form').submit(), 5000);
});

和

 //HTML
 <button type="submit">...</button>
 //JS
 $('#form').submit(function() {
     $('#loading').show();
 });

【问题讨论】：

警报会停止处理，而前者不会。提交表单并触发回发..
尝试从 click 事件处理程序中删除 .submit() 只是为了测试 .show() 是否正常工作.. 它可能是并且提交只是在你看到它之前重新加载页面跨度>
尝试：window.setTimeout($('#form').submit(), 5000);在 .show() 之后
您是否尝试设置提交表单时的功能？ $('#form').on('sumbit', function(){ $('#loading').css('display','block'); });
我也尝试在提交时显示微调器，但它不起作用。在处理表单输入的 php 脚本中，我设置了 sleep(5) 以确保有足够的时间显示微调器。当我从点击事件处理程序中删除 .submit() 时，.show() 函数正在工作！

标签： javascript jquery forms jquery-click-event

【解决方案1】：

在您的.submit() 中，显示您的加载微调器：

$("#loading").show();

在你的.submit() 完成后，隐藏它：

$("#loading").hide();

并且默认设置你的微调器display: none;，因为上面的jQuery只是改变你指定元素的css属性。

我为您提供了一个简单的演示，其中我有一个 AJAX 函数从文本输入中回显您的消息。它将显示一个加载微调器，直到成功。

Fiddle Demo

【讨论】：

我在.submit() 中使用.show() 进行了尝试。当我在点击事件中提交表单时，#loading 有时会出现，有时不会出现。我还尝试通过type="submit" 提交表单，但它从未奏效。我必须补充一点，我不使用 ajax，而是使用处理表单输入的 php 脚本。

【解决方案2】：

在头部放置...

<script type="text/javascript"> 
<!-- 
function showHide(){ 
//create an object reference to the div containing images 
var oimageDiv=document.getElementById('searchingimageDiv') 
//set display to inline if currently none, otherwise to none 
oimageDiv.style.display=(oimageDiv.style.display=='none')?'inline':'none' 
} 
//-->

把它放在你想让微调器出现的地方...（当然你需要为微调器找到一个动画 gif）

<div id="searchingimageDiv" style="display:none"> <img id="searchingimage1" src="http://www.pathtoyourimage/images/searching.gif" alt="" /> </div>

您的提交按钮文本应该是...

<input type='submit' value='Next' name='submit' onclick='showHide()'>

【讨论】：