jq判断表单内容是否已改变

后台java代码：

package com.sise.controller;

import java.io.IOException;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.sise.model.User;
import com.sise.service.TestService;


@Controller
@RequestMapping("/myController")
public class MyController {
	
	/**
	 * 跳转至test2.jsp界面
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(params = "test2")
	@ResponseBody
	public ModelAndView test2(HttpServletRequest request, HttpServletResponse response) throws Exception {
		System.out.println("test2--------------------");
		
		return new ModelAndView("test2");
	}
	/**
	 * 表单提交处理
	 * @param request
	 * @param response
	 * @return
	 * @throws IOException
	 */
	@RequestMapping(value = "submit2")
	public ModelAndView testForm2(HttpServletRequest request, HttpServletResponse response) throws IOException{
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		String remark = request.getParameter("remark");
		
		System.out.println(name);
		System.out.println(age);
		System.out.println(remark);
		return new ModelAndView("test2").addObject("cumterId","11").addObject("name",name)
			.addObject("age",age)
			.addObject("remark",remark);
	}


}

test2.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.min.js"></script>
</head>
<body>
<!-- 主表 -->
	<form id="myform" action="${ctx}/myController/submit2.do"
		method="POST">
		<input type="hidden" id="cumterId" value="${cumterId}">
		<p><span>名字：</span> <input name="name" type="text" value="${name}"/></p>
		<p> <span>年龄：</span> <input name="age" type="text"  value="${age}"/></p>
		 <p> <span>备注：</span> <textarea name="remark">${remark}</textarea></p>
		<p><input type="submit" value="提交"></p>
		
	</form>
	<p>
	<!-- 子表，此处只是进行模拟 -->
		<a id="rout" href="http://www.baidu.com">跳转去添加子表</a>
	</p>
	<!--页面的其他表单，也是模拟用的，真实开发可能有  -->
    <form id="searchForm" action="">
    
    </form>
</body>
<script type="text/javascript">
	$(function() {
		var isFormChange = false, isOriginVal, originValArr = [], currentValArr = [];
       /* 写法1 */
		$("form:not(#searchForm) input:text").each(function() {//遍历除了searchForm表单以为的其他表单，找到input标签
			//缓存以前的值
			originValArr.push($(this).val());//获取input标签的值存起来
		});
		$('form:not(#searchForm) textarea').each(function() {
			originValArr.push($(this).val());//获取textarea标签的值存起来
		})
		/* 写法二：
		 	$("form[id=myform]").find("input:text").each(function() {//遍历除了searchForm表单以为的其他表单，找到input标签
			//缓存以前的值
			originValArr.push($(this).val());//获取input标签的值存起来
		});
		$("form[id=myform]").find("textarea").each(function() {
			originValArr.push($(this).val());//获取textarea标签的值存起来
		}) 
		*/
		$("#rout").click(function() {//点击跳转时候，会判断表单是否已保存，没有保存提示先保存
			console.log("点击链接")
			currentValArr = [];
			var e = e || window.event;  
			e.preventDefault(); //方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
			$('form:not(#searchForm) input:text').each(function() {  
				//  $(this).hasClass("catComBo")?currentValArr.push($(this).parent().siblings().val()):currentValArr.push($(this).val());
				currentValArr.push($(this).val());
			});
			$('form:not(#searchForm) textarea').each(function() {
				currentValArr.push($(this).val());
			})
			if (originValArr.toString() != currentValArr.toString()) {//判断现在的表单跟之前打开界面时候的是否一样
				console.log("1" + originValArr.toString())
				console.log("2" + currentValArr.toString())

				console.log("数据不一样")
				isFormChange = true;
			}
			if ($("#cumterId").val() === '') {//判断表单是否为空，为空时候不允许调整，主要用于做数据关联，比如跳转是去添加关联表的数据的
				console.log("主表判断")
				alert('请先填写、保存主表内容');
				return;
			}
			;
			if (!!isFormChange) {
				alert('主表内容有改动，请先保存');
				return;
			}
			;
			location.href = $(this).attr("href");
		})
	})
</script>

</html>

实现效果就是要跳转界面的时候进行判断，当前界面表单是否已经保存，没有保存不允许跳转，还有就是当前表单不可以为空
效果图：
在这里插入图片描述

jq判断表单内容是否已改变

猜你喜欢