Fiddle Demo

Question

我是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();
 });

Answer 1

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

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

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

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

默认情况下使用微调器display: none;，因为上面的jQuery只是更改了指定元素的css属性。

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

Fiddle Demo

Answer 2

在Head put ......

<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()'>

如何在使用jQuery提交表单后显示loading-div？

2 个答案:

Fiddle Demo