防止重复提交_提交后禁用提交按钮、图片、超链接
View Code
<html> <head> <script type="text/javascript"> function doSubmit(){ var subtn = document.getElementById("finishbtn"); subtn.disabled = true;//让按钮不可点击 var aa = document.getElementById("test").value; if(aa == ""){ alert("不能为空"); subtn.disabled = false;//让按钮不变灰色,可点击 return false; } window.location="b.html"; } </script> </head> <body> <!--return false; 防止表格自动提交--> <form onsubmit="return false;"> <input type="text" id="test" value=""/> <input name="finishbtn" id="finishbtn" type="button" value="保存" onClick="doSubmit()" class="" /> </form> </body> </html>
两种表单提交方式,一种是普通按钮的提交,一种是submit的按钮提交
View Code
<html> <head> <script type="text/javascript"> function doSubmit(){ var subtn = document.getElementById("finishbtn"); subtn.disabled = true;//让按钮不可点击 var aa = document.getElementById("test").value; if(aa == ""){ alert("不能为空"); subtn.disabled = false;//让按钮不变灰色,可点击 return false; } window.location="b.html"; }; function check(){ var aa = document.getElementById("test2").value; if(aa == ""){ alert("不能为空"); return false; } return true; }; </script> </head> <body> <!--return false; 防止表格自动提交--> <form onsubmit="return false;"> <input type="text" id="test" value=""/> <input name="finishbtn" id="finishbtn" type="button" value="保存" onClick="doSubmit()" class="" /> </form> <form onsubmit="return check()" action="b.html"> <input type="text" id="test2" value=""/> <input name="finishbtn" id="finishbtn" type="submit" value="保存" /> </form> </body> </html>
图片也可以提交,用法跟submit按钮一模一样
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>登录</title> <script type="text/javascript"> function check(){ var aa = document.form1; if( "" == aa.username.value) { alert("用户名为空"); return false; } if( "" == aa.pwd.value) { alert("密码为空"); return false; } return true; }; function dobutton(){ var aa = document.form2; if( "" == aa.username.value) { alert("用户名为空"); return false; } if( "" == aa.pwd.value) { alert("密码为空"); return false; } window.location='SysServlet/login.sys'; }; function dosubmit(){ var aa = document.form3; if( "" == aa.username.value) { alert("用户名为空"); return false; } if( "" == aa.pwd.value) { alert("密码为空"); return false; } return true; }; </script> </head> <body> <div align="center"> <form name="form0" action="SysServlet/login.sys"> 用户名: <input type="text" name="username"/> 密码: <input type="text" name="pwd"/> <input type="image" src="img/login.jpg"/> </form> </div> <div align="center"> <form onsubmit="return check()" name="form1" action="SysServlet/login.sys"> 用户名: <input type="text" name="username"/> 密码: <input type="text" name="pwd"/> <input type="image" src="img/login.jpg"/> </form> </div> <div align="center"> <form name="form2"> 用户名: <input type="text" name="username"/> 密码: <input type="text" name="pwd"/> <input type="button" value="button按钮登录" onclick="dobutton()"/> </form> </div> <div align="center"> <form action="SysServlet/login.sys" onsubmit="return dosubmit();" name="form3"> 用户名: <input type="text" name="username"/> 密码: <input type="text" name="pwd"/> <input type="submit" value="submit按钮登录"/> </form> </div> </body> </html>
超链接:
<form action="/search/full_text_search.action" id="fmUpload" method="post" > <a href="#" onclick="javascript:submitForm();"><img src="../../images/index_132.jpg"/> </a> var submitFlag; function submitForm() { if(submitFlag != true){ alert("提交成功!"); $("#fmUpload").submit(); submitFlag = true; } }
一步一个脚印,方便自己复习,欢迎大家指正,非常感谢,共同进步!
posted on 2012-11-22 23:36 lovebeauty 阅读(622) 评论(0) 编辑 收藏 举报