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

相关文章

vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Linux换行符的使用方法详解

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将
阅读更多...
使用Jackson进行JSON生成与解析的新手指南

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON（序列化）2.2 JSON 转对象（反序列化）3.
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...
Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
Java中List的contains()方法的使用小结

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论：List 的 contain
阅读更多...
C#使用SQLite进行大数据量高效处理的代码示例

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入：从乌龟到猎豹的蜕变分页查询：加载百万数据异步处理：拒绝界面
阅读更多...
Android中Dialog的使用详解

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog（对话框）是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog（
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2