1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" /> <title>防止重复表单提交</title> <style> #refresh{ display: none; width:200px; height:20px; background-color: #ff0; } </style> <script> var inprocess = false ; window.onload = function (){ document.forms[ "picker" ].onsubmit = validateSubmit; document.getElementById( "refresh" ).onclick = startOver; } function validateSubmit () { // 防止重复的表单提交 if (inprocess) return ; inprocess = true ; console.log(inprocess); document.getElementById( "submitbutton" ).disabled = true ; document.getElementById( "refresh" ).style.display = "block" ; document.getElementById( "message" ).innerHTML = "<p>正在processing,稍等</p>" ; return false ; } function startOver(){ inprocess = false ; document.getElementById( "submitbutton" ).disabled = false ; document.getElementById( "message" ).innerHTML = "" ; document.getElementById( "refresh" ).style.display = "none" ; } </script> </head> <body> <form id= "picker" method= "post" action= "" > group1:<input type= "radio" name= "group1" value= "one" /> group2:<input type= "radio" name= "group1" value= "two" /> group3:<input type= "radio" name= "group1" value= "three" /><br /><br /> Input 1: <input type= "text" id= "intext" /> Input 2: <input type= "text" id= "intext2" /> Input 3: <input type= "text" id= "intext3" /> <input type= "submit" id= "submitbutton" value= "send form" /> </form> <div id= "refresh" > <p>单击我</p> </div> <div id= "message" ></div> </body> </html> |
一个JavaScript防止表单重复提交的实例
2021-04-05 18:03JS教程网 JavaScript
防止重复表单提交的方法有很多,本文使用JavaScript来实现防止表单重复提交,很简单,但很实用,新手朋友们不要错过
延伸 · 阅读
- 2022-06-24JavaScript逆向案例:破解登录密码
- 2022-06-24用 JavaScript 编写枚举的最有效方法
- 2022-06-24Python Django框架中表单的用法详解
- 2022-04-28在 .NET 应用程序中运行 JavaScript,你会了吗?
- 2022-04-26JavaScript 逆向过程中无限 Debug 的绕过方案
- 2022-04-262022 年 JavaScript 开发工具的生态
- JavaScript
jQuery根据ID获取input、checkbox、radio、select的示例
获取input、checkbox、radio、select的方法有很多,下面本例为大家介绍下根据ID来获取...
- JavaScript
js判断一个字符串是否包含一个子串的方法
这篇文章主要介绍了js判断一个字符串是否包含一个子串的方法,实例分析了判断的技巧与第三方脚本的使用方法,需要的朋友可以参考下...
- JavaScript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
这篇文章主要介绍了Js中使用hasOwnProperty方法检索ajax响应对象的例子,本文介绍的技巧就是hasOwnProperty方法在ajax请求中的使用,需要的朋友可以参考下...
- node.js
一文秒懂nodejs中的异步编程
这篇文章主要介绍了深入理解nodejs中的异步编程,本文给大家介绍的非常想详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...
- JavaScript
Node.js实现批量去除BOM文件头
这篇文章主要介绍了Node.js实现批量去除BOM文件头,本文直接给出实现代码,需要的朋友可以参考下...
- JavaScript
一行 JavaScript 代码搞定这些操作!(推荐)
JavaScript 是一门神奇的语言,它的某些特性让人捉摸不透,但其简洁和灵活性也让人爱不释手。有些功能逻辑按常规思路可能需要不少代码,但是利用某些...
- JavaScript
原生小程序封装跑马灯效果
这篇文章主要为大家详细介绍了原生小程序封装跑马灯效果,由多条衔接改动得到,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴...
- vue.js
vue+flask实现视频合成功能(拖拽上传)
这篇文章主要介绍了vue+flask实现视频合成功能(拖拽上传),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...