js表单提交实例:限制表单提交一次防止重复提交表单

发布时间:2020-09-13编辑:脚本学堂
js表单提交的实例代码,实现功能为只允许表单提交一次,js表单提交前验证是否为空,并分享了一个js实现自动提交表单的例子。

js只允许表单提交一次,避免因多次提交表单造成的数据重复。

当第一次点击提交后,提交按钮变灰色,无法再点击。

js提交表单的代码
 

复制代码 代码示例:

<html>
<head>
<title>js只允许表单提交一次_www.jb200.com</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script language=javascript>
<!--
 function mm_gotourl() { //v3.0
  var i, args=mm_gotourl.arguments; document.mm_returnvalue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function jm_cc(ob){
var obj=mm_findobj(ob); if (obj) {
obj.select();js=obj.createtextrange();js.execcommand("copy");}
}
 
function mm_findobj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document);
  if(!x && document.getelementbyid) x=document.getelementbyid(n); return x;
}
//-->
</script>
</head>

<body id=all text=#000000 bgcolor=#336699>
<script>
function submitonce(theform){
//if ie 4+ or ns 6+
if (document.all||document.getelementbyid){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.tolowercase()=="submit"||tempobj.type.tolowercase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
</script>
<form name="form2" method="post" action="" onsubmit="submitonce(this);return false">
<input type="text" name="textfield">
<input type="submit" name="submit" value="提交">
<input type="reset" name="submit2" value="重设">
提示:按下提交按钮后,看看有什么不同?
</form>
</body>
</html>

js表单提交前验证是否为空?

复制代码 代码示例:
<script language="javascript">
<!--
function check()
{
if(document.getelementbyid("t1").value=="")
{
window.alert("不允许为空!");
return false;
}
}
//-->
</script>
<body>
<form action="cs.htm" method="post">
<table>
   <tr>
 <td>name:</td><td><input name="test" id="t1"></td>
   </tr>
</table>
<input type="submit" value="提交" onclick="check()">
</form>
</body>

直接在 onclick 里面加的 return 才是阻止事件往下运行的关键,函数里用的 return 只是一个返回值,并不能阻止事件的运行!
解决办法:
<input type="submit" value="提交" onclick="return check()">

js实现表单的自动提交

参考:js自动提交form表单的实例代码

实现网站的注册用户登录本网站之后点击某个链接能够直接登录到chat上去。
保留了chat原有的登录界面,采用js技术当页面跳转过来的时候自动填充表单,并自动提交表单,从而实现网站用户无需再次登录即可进入chat。

js代码
 

复制代码 代码示例:

<script>
//取得cookie值
function getcookie(name){
var arr,reg=new regexp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}else{
return null;
}
}
 
//表单自动提交函数
function tijiao(){
 function sub(){
 var a = document.loginform.elements; //取得表单下所有元素
 a[2].value = getcookie('username');
 a[3].value = getcookie('username');
 //a[4].value = getcookie('channel');
 document.loginform.submit();
}
settimeout(sub,0);//以毫秒为单位的.1000代表一秒钟.根据你需要修改这个时间.
}
 
//点击button提交表单
function clickbutton(obj){
obj.onclick = function(){
obj.submit();
}
}
</script>

html代码
<form id="loginform" name="loginform" action="[login_url/]" method="post" enctype="application/x-www-form-urlencoded">
<div id="loginformcontainer" style="margin:0px;padding-bottom: 10px;">
<input type="hidden" name="login" id="loginfield" value="login">
<input type="hidden" name="redirect" id="redirectfield" value="[redirect_url/]">
<div><label for="usernamefield">[lang]username[/lang]:</label>
<input type="text" name="username" id="usernamefield" maxlength="[user_name_max_length/]"></div><br>
<div><label for="passwordfield">[lang]password[/lang]*:</label>
<input type="password" name="password" id="passwordfield"><span style="margin-left:4px; color: #339900;">默认是您的用户名</span></div><br>
<div><label for="channelfield">[lang]channel[/lang]:</label>
<select name="channelname" id="channelfield">[channel_options/]</select></div><br>
<div><label for="languageselection">[lang]language[/lang]:</label>
<select id="languageselection" name="lang" onchange="ajaxchat.switchlanguage(this.value);">[language_options/]</select></div><br>
<!--
<div><input type="submit" name="submit" style="width: 240px;height: 50px;background: url(../chat/img/bglogin2.png);background-repeat: no-repeat;border: 0px;" id="loginbutton" value=""/></div>
-->
<div><button name="subbutton" onclick="clickbutton(this);" style="width: 240px;height: 50px;background: url(../chat/img/bglogin2.png);background-repeat: no-repeat;border: 0px;" id="loginbutton" value=""></button></div>
</div>
</form>

说明:
1,要在body中加入onload="tijiao();"
2,表单的提交按钮(submit)需要隐去,不然会和js的submit()方法冲突,这里采用button提交,避免在自动登录失败时没有提交按钮。