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

第一种方法：直接按钮中加入

当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能。从代码就可以看出，我们只需在提交按钮上加入这一句： onclick="javascript:{this.disabled=true;document.form1.submit();}"，意思是当按钮点击后，将按钮的不可用属性设置为true，这样按钮就变灰了

表单提交后按钮变成灰色

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

第二种方法：通过onSubmit事件实现，并且可以将变灰按钮变为可用

在form里面添加 onSubmit事件，如果表单加入了判断，那么这个方法直接就可以用了，记住就放到最后，否则一开始就为灰了，但我们加上了一个使提交按钮变为可用的代码，
即可防止重复提交信息，也可以防止代码问题导致不可提交的情况

代码如下:

<form name=form1 action="" onSubmit=" return closebut()" >
<input name="imageField" type="submit" class="inputbut" value="确定" /><br>
<input type="button" name="hui" id="hui" value="让提交按钮可用" onclick="document.form1.imageField.disabled=false" />
</form>
<script>
function closebut(){
document.form1.imageField.disabled=true;
}
</script>

第三种，跟上面的类似

网页特效 表单提交后按钮变灰效果三

我们,站长必备的高质量网页特效和广告代码。

function submitonce(jb51_net){
if(document.all||document.getElementById){
for(i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js控制一个按钮是否可点击(可使用)disabled的实例

    实例如下: /*** * 设置按钮是否可点击 */ function abledDownloadBtn(flag) { var $exportChartBtn = $("#exportChartBtn"); flag ? $exportChartBtn.removeAttr("disabled") : $exportChartBtn.attr("disabled", "disabled"); } 以上这篇js控制一个按钮是否可

  • js和jquery设置disabled属性为true使按钮失效

    设置disabled属性为true即为不可用状态. JS document.getElementByIdx("btn").disabled=true; jquery $("#btn").attr("disabled", true); html <input type="button" value="提交" id="btn">

  • 超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击 例如: <a herf='http://www.baidu.com' onclick='return click(this);' disabled='ture'>bai du</a> 上面的意思是不想让bai du的超链生效,但在click不做任何约束和判断的话,但点击bai du的时候自然就会跳转到百度页面,这就是html中超链接禁用属性的bug 可以添加下面js约束来判断超链接是否可以使用

  • js和jquery使按钮失效为不可用状态的方法

    设置disabled属性为true即为不可用状态. JS: 复制代码 代码如下: document.getElementByIdx("btn").disabled=true; jquery 复制代码 代码如下: $("#btn").attr("disabled", true); html: 复制代码 代码如下: <input type="button" value="提交" id="btn&

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

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

  • 从数据库读取数据后将其输出成html标签的三种方法

    也许很多人从数据库中读的数据是不需要数据成html标签的,但是也许有一天你们会发现当我们需要输出成html标签时编译器却自动帮我们输出成字符串了这是我们可以这样来 方法1: 最常用的方法,使用JS或JQ JQ: $("#div").html("<span>我是HTML代码</span>"); JS: var dobj=document.getElementById("div"); dobj.innerHTML = &quo

  • JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div调整高度.调整宽度.调整背景色等.实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • Android实现按钮点击事件的三种方法总结

    Android实现按钮点击事件的三种方法总结

    目录 一.匿名内部类实现 二.接口实现 三.布局实现 Button是程序用于和用户进行交互的一个重要控件,相信大家对这个控件已经非常熟悉了,我们平时用的最多的控件之一.既然有Button,那肯定有onClick方法,下面就教大家三种实现点击事件的方法,大家选择一种自己喜欢的方式写就可以了. 我们先在layout文件里面放置一个Button控件,很简单,让它水平和垂直都居中,Button里面的文字也居中对齐,字体大小15sp,内容为“我是按钮”,具体代码如下: <RelativeLayout xm

  • js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(form.userId.value=='') {                alert("请输入用户帐号!");                form.userId.focus();                return false;           }       if(fo

  • 实现点击下箭头变上箭头来回切换的两种方法【推荐】

    我所知道的常用的就这两种. 第一种:说明一下我用的是fontawesome字体,首先要去官网下载来用 <span class='btn btn-more'> <i class='fa fa-angle-down'></i> <i class='fa fa-angle-up hidden'></i> </span> 我用的是bootstrap,所以hidden是自带的,上面的初始状态就是下箭头angle-down是显示的,然后上箭头an

  • Flutter实现页面切换后保持原页面状态的3种方法

    Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

  • Android 防止多次重复点击的三种方法的示例

    在项目中经常会遇到对按钮.自定义控件的 Item 等防止多次重复的点击的问题,下面做一个小结. 方法1:使用 RxJava 的 throttleFirst() 具体代码如下: /** * 防止重复点击 * * @param target 目标view * @param listener 监听器 */ public static void preventRepeatedClick(final View target, final View.OnClickListener listener) { R

  • php中使用Curl、socket、file_get_contents三种方法POST提交数据

    抓取远程内容,之前一直都在用file_get_content函数,其实早就知道有curl这么一个好东西的存在,但是看了一眼后感觉使用颇有些复杂,没有file_get_content那么简单,再就是需求也不大,所以没有学习使用curl.直到最近,要做一个网页小偷程序的时候才发现file_get_content已经完全不能满足需求了.我觉得,在读取远程内容的时候,file_get_content除了使用比curl便捷以外,其他都没有curl好. php中curl和file_get_content的一

  • asp实现防止从外部提交数据的三种方法第1/3页

    防止从外部提交数据的方法 第一种做法,屏蔽特殊字符和关键字 fqys=request.servervariables("query_string") dim nothis(18) nothis(0)="net user" nothis(1)="xp_cmdshell" nothis(2)="/add" nothis(3)="exec%20master.dbo.xp_cmdshell" nothis(4)=&

随机推荐