使用js控制表單重複提交（1加鎖，2事件方式，3 EasyUI中解決表單重複提交）
阿新 • • 發佈：2019-02-19
方法一、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 :[email protected] * 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 }];