本文主要是介绍使用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中解决表单重复提交）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
