使用js控制表单重复提交（1加锁，2事件方式，3 EasyUI中解决表单重复提交）

2024-04-19 19:18
文章标签 使用 表单 js 解决 方式 重复 事件 提交 控制 加锁 easyui

本文主要是介绍使用js控制表单重复提交（1加锁，2事件方式，3 EasyUI中解决表单重复提交），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

方法一、
var flag = true;
$(function() {$("#interested").click(function() {beInterested();});
});function beInterested() {//$("#interested").unbind("click");if (!flag) {alert("已感兴趣!");return;}if (flag) {var newNum = parseInt($("#beInterestedVal").attr("value"));// 点击之后就立即改变值$("#beInterestedVal").attr("value", newNum + 1);$("#beInterestedVal").text(newNum + 1);flag = false;}var copyrightid = $("#copyrightid").val();jQuery.ajax({type : 'POST',url : "/cartoon-web/copyRight/beInterestedIn",data : {"cid" : copyrightid},dataType : 'json',success : function(data) {if (data.result == 'success') {flag = false;// 设置设置不可以再点击// $("#interested").unbind("click");// alert("修改数据成功，要改变样式，不让此点再次点击!");} else {flag = true;alert(data.msg);}},error : function(XMLHttpRequest, textStatus, errorThrown) {alert("网络或者其它原因导致的错误!");flag = true;}});
}

方法二、

 

$("#publicCopyRight").click(function() {var b = validator.form();if (b == true) {submitForm();}});
var lock = true;
function submitForm() {var cid = $("#copyrightForm #cid").attr("value");/* 版权方名称 */var copyRightName = $("#copyRightName").val();/* 联系方式 */var contact = $("#contact").val();/* 作品名称 */var worksName = $("#worksName").val();/* 作品类别 */var worksCategory = $("#worksCategory").val();if (worksCategory == "请选择...") {worksCategory = "";}console.log("worksCategory = " + worksCategory);/* 授权价格 */var price = $("#price").val();/* 作品介绍 */var worksInfo = $(document.getElementsByTagName('iframe')[0].contentWindow.document.body).html();// alert(worksInfo);/* 授权范围 */var auScope = $("#auScope").val();/* 授权期限 */var auDeadLine = $("#auDeadLine").val();/* 本信息有效期限 */var termOfValidity = $('input[name="termOfValidity"]:checked').val();/* 表示是否同意的标识 *///console.log(document.getElementById("agreeFlag").checked);var agreeFlag = (document.getElementById("agreeFlag").checked == true) ? 1 : 0;if(agreeFlag == 0) {lock = false;alert("对不起，您得先同意酷漫网相关法律声明才可以发布版权信息!");$("#low-declare").css("color","red");} else {lock = true;$("#low-declare").css("color","#2d3e53");}/* 获取图片上传的路径 */var copyRightImage = $("#posterUrl").val();if (lock == true) {$("#publicCopyRight").unbind("click");lock = false;jQuery.ajax({type : 'post',url : url,data : {"cid" : cid,"copyRightName" : copyRightName,"contact" : contact,"worksName" : worksName,"worksCategory" : worksCategory,"price" : price,"worksInfo" : worksInfo,"auScope" : auScope,"auDeadLine" : auDeadLine,"termOfValidity" : termOfValidity,"agreeFlag" : agreeFlag,"copyRightImage" : copyRightImage,"mark" : "publishyes"},contentType : "application/x-www-form-urlencoded; charset=utf-8",dataType : 'json',success : function(data) {if (data.result == 'success') {// 成功之后还是不让提交，直接等待跳转。//console.log("/cartoon-web/copyRight/toPreviewPage?cid=" + data.cid);window.location = "/cartoon-web/copyRight/toPreviewPage?cid=" + data.cid;} else if (data.result == "fail") {alert(data.msg);lock = true;$("#publicCopyRight").bind("click",function() {submitForm();});}},error : function(XMLHttpRequest, textStatus, errorThrown) {alert("网络或者其它原因导致的错误!");lock = true;$("#publicCopyRight").bind("click",function() {submitForm();});}});}
}


EasyUI中解决表单重复提交(主要看Add)：

/** name       :Zuoquan Tu* mail       :tuzq@XXXXX.cn* date       :2015/06/30* version    :1.1* description:modified by tuzuoquan 2015/06/30* CopyRight (C) 2015-06*/
var PageHandler = (function($) {var isAddedFlag = false;return {searchClear:function(){$("#adPage-form").form("clear");},submitForm:function() {//获取当前页，总页数等信息var grid = $("#adPage-datagrid");var options = grid.datagrid('getPager').data("pagination").options;//表示当前页var curr = options.pageNumber;//表示总页数//var total = options.total;//表示每页的大小var pageRow = options.pageSize;//获得字段信息var adPageName = $("#adPage-form #adPageName").textbox("getValue");var adPageAddress = $("#adPage-form #adPageAddress").textbox("getValue");// 对table进行操作$("#adPage-datagrid").datagrid('load', {"page" : curr,"rows" : pageRow,"adPageName" : adPageName,"adPageAddress" : adPageAddress});},/*** 添加窗口中的重置按钮*/clearForm:function() {$("#adPage-add-form").form("clear");},/*** 打开添加UI*/addUI:function() {$("#adPage-add-window").window("open");},/*** 实现添加功能*/add:function() {var isValid = $("#adPage-add-form").form('validate');if(!isValid) {$.messager.alert('验证错误提示','对不起，信息格式错误!');} else {if(PageHandler.isAddedFlag) {$.messager.show({title : '消息提醒',msg : '正在保存，请您耐心等待...',timeout : 5000,showType : 'slide'});return;}if(!PageHandler.isAddedFlag) {//获得字段信息var adPageName = $("#adPage-add-window #adPageName").textbox("getValue");var adPageAddress = $("#adPage-add-window #adPageAddress").textbox("getValue");var adFunctionNum = $("#adPage-add-window #adFunctionNum").numberbox("getValue");PageHandler.isAddedFlag = true;jQuery.ajax({type : 'POST',url : basePath + "/adPage/createAdPage",data : {"adPageName" : adPageName,"adPageAddress" : adPageAddress,"adFunctionNum" : adFunctionNum},dataType : 'json',success : function(data) {if(data.result == "success") {$("#adPage-add-window").window("close");$("#adPage-datagrid").datagrid('reload');PageHandler.isAddedFlag = false;} else if (data.result == "error") {$("#adPage-add-window").window("close");$.messager.show({title : '消息提示',msg : data.msg,timeout : 5000,showType : 'slide'});PageHandler.isAddedFlag = false;}},error : function() {$.messager.show({title : '消息提示',msg : '添加失败......',timeout : 5000,showType : 'slide'});PageHandler.isAddedFlag = false;}});	}}},/*** 修改*/editUI:function() {var row = $("#adPage-datagrid").datagrid('getSelected');if (row) {var id = row.id;$("#adPage-edit-window #id").val(id);$("#adPage-edit-window #adPageName").textbox('setValue', row.adPageName);$("#adPage-edit-window #adPageAddress").textbox('setValue', row.adPageAddress);$("#adPage-edit-window #adFunctionNum").numberbox('setValue', row.adFunctionNum);$("#adPage-edit-window").window("open");} else {$.messager.show({title : '消息提示',msg : '对不起，没有选中要修改的行......',timeout : 5000,showType : 'slide'});}},edit:function() {//1、判断校验是否成功var isValid = $("#adPage-edit-window").form('validate');//2、如果失败则提示修改失败if(!isValid) {$.messager.alert('验证错误提示','对不起，信息格式错误!');} else {//3、如果成功则提交修改var id = $("#adPage-edit-window #id").val();var adPageName = $("#adPage-edit-window #adPageName").textbox('getValue');var adPageAddress = $("#adPage-edit-window #adPageAddress").textbox('getValue');var adFunctionNum = $("#adPage-edit-window #adFunctionNum").textbox('getValue');jQuery.ajax({type : 'POST',url : basePath + "/adPage/updateAdPage",data : {"id":id,"adPageName" : adPageName,"adPageAddress" : adPageAddress,"adFunctionNum" : adFunctionNum},dataType : 'json',success : function(data) {if(data.result == "success") {$("#adPage-edit-window").window("close");$("#adPage-datagrid").datagrid('reload');} else if (data.result == "error") {$("#adPage-edit-window").window("close");$.messager.show({title : '消息提示',msg : data.msg,timeout : 5000,showType : 'slide'});}},error : function() {$.messager.show({title : '消息提示',msg : '修改失败......',timeout : 5000,showType : 'slide'});}});	}},remove:function() {var row = $('#adPage-datagrid').datagrid('getSelected');if (row) {$.messager.confirm('Confirm','确定删除该用户吗?',function(r) {if (r) {jQuery.ajax({type : 'POST',url : basePath + "/adPage/updateFlag",data : {"id" : row.id,"flag":0},dataType : 'json',success : function(data) {if(data.result == "success") {$("#adPage-datagrid").datagrid('reload');} else if(data.result == "error") {$.messager.show({title : '消息提示',msg : data.msg,timeout : 5000,showType : 'slide'});}},error : function() {$.messager.show({title : '消息提示',msg : '删除失败......',timeout : 5000,showType : 'slide'});}});}});}}}
})(jQuery);var toolbar = [{text:'添加',iconCls:'icon-add',handler:PageHandler.addUI
},'-',{text : '修改',iconCls : 'icon-edit',handler : PageHandler.editUI
}, '-',{text : '删除',iconCls : 'icon-remove',handler : PageHandler.remove
}];



这篇关于使用js控制表单重复提交（1加锁，2事件方式，3 EasyUI中解决表单重复提交）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/918335。

相关文章

使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时，有时会遇到由于找不到qt5core.dll,无法继续执行代码，这个问题可能是由于该文... 遇到qt5cored.dll文件错误时，可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错
阅读更多...
C++中零拷贝的多种实现方式

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.
阅读更多...
Python中help()和dir()函数的使用

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象（如模块、类、函数等）的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(
阅读更多...
Linux脚本(shell)的使用方式

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》：本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量：定义、赋值自定义变量：引用、修改、删
阅读更多...
Java使用HttpClient实现图片下载与本地保存功能

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.
阅读更多...
Python中使用uv创建环境及原理举例详解

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,：本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点：二、安装uv1. 通过pip安装2. 通过脚本安装验证安装：配置镜像源（可
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2