A-A+

js中表单提交后按钮变灰色的功能

2016年02月21日前端设计暂无评论阅读 7 views 次

表单提交后按钮变灰色的功能实现方法,可有效防止重复提交表单,如果提交动作没有完成,则一直呈灰色状态等待确认,代码的实现也是超简单的,此方法也是实用,在点击“Submit按钮”之后，将Submit设置为Disable，使按钮变灰不可用,具体的做法如下.

1、先在Form里加入:

onSubmit="submitonce(this)"

2、再在“Submit按钮”之前加入下面的代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单提交后按钮变成灰色</title>
</head>
<body>
<form name=form1 method="POST" action="/" target=_blank><p><input type="text" name="T1"
size="20"><input type="button" value="提交" onclick="javascript:
{this.disabled=true;document.form1.submit();}">
<input type="reset" value="重置" name="B2"></p>
</form>
</body>
</html>

我们写在input中不好,我们可以写成函数,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单提交后按钮变灰代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<script language="javascript">
function my_submit(){
document.form1.submit();
document.form1.submit1.disabled=true;
}
</script>
<form action="/" method="post" name="form1">
<input type="text" name="name">
<input type="button" name="submit1" value="提交" onClick="javascript:my_submit();">
</form>
</body>
</html>

3、如果Form中原本就存在onSubmit动作，或者按钮类型不是Submit，而是button，则在onSubmit作用的函数中加入下面的代码：

document.fHtmlEditor.Submit.disabled=true;

如果你想禁止当前页面所有按钮可使用下面代码:

夏日博客