javascript实现点击提交按钮后显示loading的方法

本文实例讲述了javascript实现点击提交按钮后显示loading的方法。分享给大家供大家参考。具体如下：

这里可以实现点击提交按钮后显示loading，防止用户重复提交

<style>
#loading {
  position:absolute;
  width:500px;
  height:50px;
  top:50%;
  left:50%;
  margin: -25px -150px;
  background-color:#FFFFFF;
  border:1px solid #CCCCCC;
  text-align:center;
  padding:20px;
}
</style>
<div id="loading" style="display:none">
<img src="image/ajax.gif" /> Loading...
</div>
<a href="#" onclick="document.getElementById('loading').style.display='';">test</a>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript 实现复制（Copy）动作方法大全

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • javascript实现表单提交后，提交按钮不可用的方法

    本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

  • JavaScript实现给按钮加上双重动作的方法

    JavaScript实现给按钮加上双重动作的方法

    本文实例讲述了JavaScript实现给按钮加上双重动作的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript给网页上按钮加入同时加入两个动作,一个是在文本框显示文字,另一个则是转向到某个网址,以往的按钮跳转都是单一的,这一个又在跳转时加入了将文字赋值给文本框的动作,搞懂了原理,就可以灵活运用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-two-action-codes/ 具体代码如下: <title>

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • JavaScript实现自动消除按钮功能的方法

    JavaScript实现自动消除按钮功能的方法

    本文实例讲述了JavaScript实现自动消除按钮功能的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript实现点击单选按钮链接转向对应网址的方法

    javascript实现点击单选按钮链接转向对应网址的方法

    本文实例讲述了javascript实现点击单选按钮链接转向对应网址的方法.分享给大家供大家参考.具体如下: 这里实现一个按钮特效,当点击复选择框按钮的时候,激活链接,跳转到某网址,这里主要是由onClick派生出来的一些功能,然后配合函数你可以编写出更多的按钮特效来. 运行效果截图如下: 具体代码如下: <html> <head> <title>点击文本框激活链接转向某网址</title> <SCRIPT> function go(loc) {

  • javascript实现点击后变换按钮显示文字的方法

    本文实例讲述了javascript实现点击后变换按钮显示文字的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>显示一些按钮,如果点击了, 当前点击的按钮文本变为"点了",其他按钮文本变为"没点"</title> <script type="text/javascript

  • javascript实现点击提交按钮后显示loading的方法

    本文实例讲述了javascript实现点击提交按钮后显示loading的方法.分享给大家供大家参考.具体如下: 这里可以实现点击提交按钮后显示loading,防止用户重复提交 <style> #loading { position:absolute; width:500px; height:50px; top:50%; left:50%; margin: -25px -150px; background-color:#FFFFFF; border:1px solid #CCCCCC; text

  • 点击提交按钮后DropDownList的值变为默认值实现分析

    在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值 原因是要将绑定函数loadData(),写在 if(!IsPostBack) { 你的绑定函数: } 否则,页面会重新加载,所有控件的值变为初始值. IsPostBack是Page类有一个bool类型的属性,用来判断针对当前页是正在为响应客户端回发而加载还是正在被首次加载和访问. 当IsPostBack＝true时表示为响应客户端回发而加载. 当IsPostBack＝false时表示正在被首次加载和访问. 也就是说只有当IsPos

  • 点击提交按钮后按钮变灰色不可用状态的三种方法

    第一种方法:直接按钮中加入 当点击提交后,提交按钮变灰色不可用,这样可有效防止重复提交,本代码就是实现这样一个功能.从代码就可以看出,我们只需在提交按钮上加入这一句: onclick="javascript:{this.disabled=true;document.form1.submit();}",意思是当按钮点击后,将按钮的不可用属性设置为true,这样按钮就变灰了 表单提交后按钮变成灰色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 第二种方法:通过onSubmit

  • JavaScript自动点击链接 防止绕过浏览器访问的方法

    做支付宝帐号登录,需要做一个效果,就是打开链接页面的时候,不需要点击链接,直接跳到支付宝登录页面.也就是说,需要做一个自动点击链接的效果. 基本都是用这个: <body onLoad="autoclick('auto')"> <a id='auto' href=".$url."><img border='0' src='images/alipaylog.gif' /></a> </body> <scr

  • 防止在服务器处理完成之前用户多次点击提交按钮处理代码

    如果网页速度过慢或者其他原因,用户多次提交能导致数据的修改,怎么解决这个问题呢? 这段是放在 Page_Load 中 复制代码 代码如下: if(!Page.IsPostBack) { System.Text.StringBuilder s = new System.Text.StringBuilder(); s.Append("a();"); s.Append(this.GetPostBackEventReference(this.Button1)); this.Button1.At

  • Bootstrap中点击按钮后变灰并显示加载中实例代码

    Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示． 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

  • Android中AlertDialog 点击按钮后不关闭对话框的功能

    Android中AlertDialog 点击按钮后不关闭对话框的功能

    这里的问题:当我点击确定按钮,也就是 AlertDialog 里的 PositiveButton 的时候,我们需要判断用户是输入是否符合我们的预期,如果不符合通常提示用户重写输入,且不关闭当前的对话框,但上图中点击按钮后会自动的关闭窗口. 先看原来的这个是怎么写的: private void openDialog() { LinearLayout linearLayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.l

  • 微信小程序实现点击按钮后修改颜色

    微信小程序实现点击按钮后修改颜色

    这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需实现的功能: 点击按钮后,按钮的颜色会加深 效果展示: 原按钮 点击后的按钮 思路: 给按钮设置一个点击事件,点击了按钮后,修改按钮的样式. 代码: test.wxml文件 <view wx:if="{{sty==0}}"> <view class="score" style="backg

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

随机推荐