使用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.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"> Username:</label>
<input type="username" name="username" id="username" size="30" required><br><br>
<label for="password"> 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>
show()
方法仅影响 CSS 设置display
。如果要设置可见性,则需要直接执行此操作。此外,.load_button
元素是一个按钮,不会引发submit
事件。您需要将选择器更改为form
才能正常工作:
$('#login_form').submit(function() {
$('#gif').css('visibility', 'visible');
});
另请注意,return true;
在您的逻辑中是多余的,因此可以将其删除。
按钮输入没有提交事件。尝试将事件处理程序附加到窗体:
<script type="text/javascript">
$('#login_form').submit(function() {
$('#gif').show();
return true;
});
</script>
仅使用 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>
提交表单后不久,它将显示加载图像。
onclick函数呢:
<form id="form">
<input type="text" name="firstInput">
<button type="button" name="namebutton"
onClick="$('#gif').css('visibility', 'visible');
$('#form').submit();">
</form>
当然,您可以将其放入函数中,然后通过onClick触发它
相关文章:
- 如何在生成下载文件时显示加载动画
- 如何在谷歌字体加载时显示加载图像
- 现在可以在加载addThis时显示加载吗
- 单击时选择2(未选中),显示加载微调器javascript
- 如何在网页加载时显示加载内容,并在页面完全加载时隐藏此内容
- 在弹出窗口中显示加载消息
- 使用jquery/ajax显示加载图像
- 在引导轮播加载之前显示加载微调器
- 是否可以在页面开始加载之前显示加载gif/image
- 单击链接后显示加载程序
- 等待数据时显示加载程序
- 在谷歌地图上显示加载消息
- 只想在页面上未加载初始数据时显示加载gif
- 如何在加载选项卡内容时显示加载图像
- 如何在ajax请求中显示加载微调器
- 当javascript图像转盘加载36个图像时,我可以显示加载指示器吗
- 隐藏/显示加载功能不起作用
- Jquery Chosen插件-通过Ajax动态填充列表时显示加载图标
- 有没有一种方法可以用jQuery捕获JavaScriptPageMethods调用?(显示加载屏幕)
- jquery图片库显示加载程序gif