点击按钮变成灰色不可再次点击

原文转载自http://www.santii.com/article/24.html

很多时候，当我们点击提交按钮，如果因为执行的程序太慢，或是网络问题，就会一直处于提交状态。

不了解的人，还以为是没有提交成功，于是就会一直点提交、提交、提交……

这样就会造成多次提交，而产生重复记录。

那么要如何才能防重复提交呢？

小编的做法就是，使用js来控制。

当点击提交后将按钮变成灰色，并将其value值改为一个提示信息，比如“正在提交中，请稍等...”

下面我们来看看详细代码。

    <style>input.btn_add{ background:#1abc9c; font-size:22px; color:#fff; border-radius:4px; border:none;width:200px; height:50px;}input.btn_add_no{ background:#cccccc; font-size:22px; color:#333; border-radius:4px; border:none;width:200px; height:50px;}</style><input type="button" name="syncbtn" class="syncbtn btn_add" value="同步订单" /><script>$(document).on("click",".syncbtn",function(){var oldvalue=$(this).val();$(this).val("正在同步，请稍等......");$(this).attr("disabled","disabled");$(this).removeClass("btn_add");$(this).addClass("btn_add_no");alert("暂停");//由于这里没有执行过程久的程序，所以使用alert才能看到效果。//执行相关代码//执行成功后再还原回去，如下代码$(this).removeAttr("disabled");$(this).removeClass("btn_add_no");$(this).addClass("btn_add");$(this).val(oldvalue);});</script>

在实例中，我们有用到unbind()方法，其目的地是移除按钮的事件处理程序，也就是当按钮处于灰色状态时，点击也不会执行代码。

点击按钮变成灰色不可再次点击相关推荐

点击按钮显示文字，再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字点击按钮显示文字,再次点击按钮隐藏文字通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
【Android】点击按钮播放音乐，再次点击停止播放
1.在res下新建raw文件夹将音频复制粘贴至文件夹 2.代码 (1)PlatformActivity.java public static int cnt = 0;SoundPool sp;//声 ...
php点击按钮变文字,点击按钮文字变成input框,点击保存变成文字的实现
下面为大家带来一篇点击按钮文字变成input框,点击保存变成文字的实现代码.内容挺不错的,现在分享给大家,也给大家做个参考. 点击按钮文字变成input框,点击保存变成文字的实现代码点击按钮文字变成 ...
html点击按钮文件上传,js点击按钮实现文件上传
点击按钮实现文件上传点击按钮实现文件上传 $('#uploadFileButton').click(function () { $('#upload').click(); }); $('#uploa ...
点击英文显示中文，再次点击隐藏中文
点击英文显示中文,再次点击隐藏中文代码涉及方法 ➤ 根据className获取dom元素 ➤ js绑定点击事件 ➤ js获取当前dom元素的下一个元素代码 <!DOCTYPE html&g ...
IE浏览器安装zblog时，勾选了同意协议，下一步按钮呈现灰色状态不能点击的解决方法
云服务器系统是Windows server,默认浏览器是IE时,在安装zblog时,会出现已经勾选了同意协议,但无法点击下一步,按钮呈现灰色状态,一般情况下时自带的IE设置中各种禁用选项太多,解决办法 ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
php网站点击按钮更新程序,php页面点击按钮执行更新操作
代码如下:此页面名称为updateScoreNew.php,点击按钮后获得id和score,然后执行更新数据库操作,不知道怎么写,点击按钮怎么都不调用方法,愁死了都... html head ?php ...
python点击按钮弹出新窗口_PyQt5点击button如何弹出新窗口？
怎么通过点击button,来打开一个新的窗口? 是写在同一个脚本里,还是把新窗口的代码放在另一个脚本里,然后通过点击按钮来运行? import sys from PyQt5.QtWidgets imp ...

点击按钮变成灰色不可再次点击

点击按钮变成灰色不可再次点击相关推荐

最新文章

热门文章