使用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。

相关文章

如何使用celery进行异步处理和定时任务(django)

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery
阅读更多...
使用Python绘制蛇年春节祝福艺术图

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》：本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3
阅读更多...
oracle数据库索引失效的问题及解决

oracle数据库索引失效的问题及解决

《oracle数据库索引失效的问题及解决》本文总结了在Oracle数据库中索引失效的一些常见场景,包括使用isnull、isnotnull、!=、、、函数处理、like前置%查询以及范围索引和等值索引... 目录oracle数据库索引失效问题场景环境索引失效情况及验证结论一结论二结论三结论四结论五总结ora
阅读更多...
Jsoncpp的安装与使用方式

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数
阅读更多...
Redis事务与数据持久化方式

Redis事务与数据持久化方式

《Redis事务与数据持久化方式》该文档主要介绍了Redis事务和持久化机制,事务通过将多个命令打包执行,而持久化则通过快照（RDB）和追加式文件（AOF）两种方式将内存数据保存到磁盘,以防止数据丢失... 目录一、Redis 事务1.1 事务本质1.2 数据库事务与redis事务1.2.1 数据库事务1.
阅读更多...
python使用watchdog实现文件资源监控

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用，其生态环境也
阅读更多...
Python中构建终端应用界面利器Blessed模块的使用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
Linux磁盘分区、格式化和挂载方式

Linux磁盘分区、格式化和挂载方式

《Linux磁盘分区、格式化和挂载方式》本文详细介绍了Linux系统中磁盘分区、格式化和挂载的基本操作步骤和命令,包括MBR和GPT分区表的区别、fdisk和gdisk命令的使用、常见的文件系统格式以... 目录一、磁盘分区表分类二、fdisk命令创建分区1、交互式的命令2、分区主分区3、创建扩展分区，然后
阅读更多...
element-ui下拉输入框+resetFields无法回显的问题解决

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面，不做任何操作，点击重置按钮，再进行下
阅读更多...
Linux中chmod权限设置方式

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令：chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2