使用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 :[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
}];