使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

简介: 方法一、var flag = true;$(function() { $("#interested").click(function() { beInterested(); });});function beInterested() { //$("#interested").unbind("click"); if (!flag) { alert("已感兴趣!");
方法一、
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
}];



目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
1月前
编程笔记 html5&css&js 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要
|
2月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
31 1
|
16天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
10 0
|
18天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
18 1
|
28天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
15 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3
|
1月前
|
JavaScript
js事件记录(如有更新请留言我去补充)
js事件记录(如有更新请留言我去补充)