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

在点击“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;

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

 代码如下 复制代码

<script language="javascript">
function submitonce(theform){
if (document.all||document.getElementById){
for (i=0;i<theform.length;i++){
var tempobj=theform.elements
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=true
}
}
}
</script>

时间: 2024-09-30 22:47:28

js中表单提交后按钮变灰色的功能的相关文章

提交后按钮变成灰色

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|表单点击提交按钮后变成灰色不可再次点击</title> </head> <body> <form name=form1 method="POST" action=&q

javascript实现表单提交后,提交按钮不可用的方法_javascript技巧

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

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

 具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> <

js实现表单提交后不重新刷新当前页面_javascript技巧

如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'> <input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()" class="Button2

js表单提交和submit提交的区别实例分析_javascript技巧

本文实例分析了js表单提交和submit提交的区别.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

JS中表单的使用总结

 本篇文章主要是对JS中表单的使用进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1.javascript刷新页面的方法         window.location.reload();   使用window.open()弹出的弹出窗口,刷新父窗口     window.opener.location.reload()   使用window.showDialog弹出的模式窗口     window.dialogArguments.location.reload();   

form-spring mvc jsp中表单提交

问题描述 spring mvc jsp中表单提交 <%form% action="${ctx}/XtRoleController.do" method="post"> 角色编号:<%input% type="text" name="roleId" value="${xtRolePO.ROLE_ID}" readonly="readonly"> 父角色编号:<

jsp- My97DatePicker文本框中出现了日期,如何保持在这个日期被表单提交后而不被清空

问题描述 My97DatePicker文本框中出现了日期,如何保持在这个日期被表单提交后而不被清空 My97DatePicker文本框中出现了日期,如何保持在这个日期被表单提交后而不被清空 解决方案 页面提交完返回的时候把值再带回来,然后在页面赋值-- 解决方案二: 做表单提交后,页面的js控制

submit-form表单提交后ajax异步调用另一个url

问题描述 form表单提交后ajax异步调用另一个url ... ... 提交Submit function submitForm(){ if(_finst_taskComment.value==""){ alert("请填写审批意见"); }else{ document.getElementsByTagName("form")[0].submit(); } } 另一个url如http://........ 解决方案 function submi