当前位置：首页 > 编程笔记 >

一个JavaScript防止表单重复提交的实例

郎曜文

2023-03-14

本文向大家介绍一个JavaScript防止表单重复提交的实例，包括了一个JavaScript防止表单重复提交的实例的使用技巧和注意事项，需要的朋友参考一下

<!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

我正在做一个Django项目，其中一个表单不会提交。我发现罪魁祸首是一些JavaScript，它格式化了货币输入（当我移除JS或移除输入时，它提交）这是我的简化表单--JS来自html5货币/货币输入
防止在jQuery中重复提交表单

问题内容：我的表单需要服务器处理一些时间。我需要确保用户等待并且不会再次单击按钮来尝试重新提交表单。我尝试使用以下jQuery代码：当我在Firefox中尝试此操作时，所有功能都被禁用，但是该表单未与应该包含的任何POST数据一起提交。我不能使用jQuery提交表单，因为我需要将按钮与表单一起提交，因为有多个提交按钮，并且我确定POST中包含哪个值使用了哪个按钮。我需要像平常一样提交表单，并且
Java：如何防止表单重复提交

1、通过JavaScript屏蔽提交按钮（不推荐） 2、给数据库增加唯一键约束（简单粗暴） 3、利用Session防止表单重复提交（推荐） 4、使用AOP自定义切入实现
防止Layui form表单重复提交的实现方法

本文向大家介绍防止Layui form表单重复提交的实现方法，包括了防止Layui form表单重复提交的实现方法的使用技巧和注意事项，需要的朋友参考一下在提交表单数据时，提交按钮为 submit 类型，以layui为js框架时，会重复提交表单数据，为防止这一情况，有效的做法是：在<form>里面，加上 lay-filter="formConfig" , οnsubmit="return fa
防止在Rails AJAX表单中重复提交

问题内容：我有的：我有一个通过AJAX提交的表格。我想要的是：我想防止重复提交。由于仅在成功完成请求后该表单才会消失，因此只要数据库尚未完成数据写入，用户就可以单击“提交”按钮。显然，我不需要。我尝试过的我尝试将其添加到“提交”按钮本身中，但是它不起作用。该按钮被禁用，但是没有数据发送。我也尝试将点击处理程序添加到“提交”按钮。具有与以前相同的效果。实际上没有数据发送到控制器，但是按
php 防止表单重复提交两种实现方法

本文向大家介绍php 防止表单重复提交两种实现方法，包括了php 防止表单重复提交两种实现方法的使用技巧和注意事项，需要的朋友参考一下 php 防止表单重复提交由于网络原因，经常出来点了提交按钮，网页没有反应，而进行再次点击。这样就导致后台收到两次提交，从而进行两次处理，本文章向大家介绍php 防止表单重复提交的几种方法 1、前端解决方法一：可以通过前端来解决。当用户点了提交按钮之后，先使用

相关阅读

php 防止表单重复提交两种实现方法 JavaScript如何防止按钮提交表单反应-防止表单提交 PHP防止post重复提交数据的简单例子是否存在用于防止django重复提交表单的库？

相关文章

JDBC事务提交/回滚实例 JavaScript表单验证网易互娱交互实习一面复盘 JavaScript之表单基础知识（表单脚本）MySQL一条更新sql的执行流程，以及日志的两阶段提交，以及崩溃恢复流程和组提交

相关问答

Laravel一个表单两个提交按钮使用PHP防止重复记录到表[重复]在ASP.NET MVC页上防止双重提交/发布 Laravel 5.1一个表单两个提交按钮 Vee validate on blur阻止表单提交

相关工具

自动文字提示列表微擎表单验证矿山防御 Jquery表单验证插件 One一个

相关文档

DIY 一个实用的 miniLAPP 服务器 JavaScript 的 12 个怪癖 iOS 安全攻防网防G01 帮助文档具有高级安全性的 Windows 防火墙