JQ判断from表单是否修改两种方式

第一种为HTML表单元素添加onchange事件处理器是一种可行的方法,这也是用的最多的,但是onchange的实现有一些问题存在:

1.如果用户改变表单域的值,然后再修改回原始值,程序仍将认为表单的修改已经发生。

2.如果表单项的值是通过Javascript动态修改的,onchange事件不会被自动触发。

3.为每一个表单元素增加onchange事件会引起性能问题,特别是较大的表单。

4.如果将表单元素从DOM中增加或移除,你需要相应的注册或移除事件侦听。

5.checkbox和radio的onchange事件在某些浏览器下不能按预期工作(你应该知道是哪个浏览器)。

6.除了onchange,还有更简单有效的方案。

<script type="text/javascript" src="jquery.js"></script>

<script>

$(function() {

$("#myform :input").change(function(){

$("#myform").data("changed",true);

});

});

function mysubmit(){

alert($("#myform").data("changed"));

if($("#myform").data("changed")){

alert("输入框修改过!")

}else{

alert("没有修改过,继续!");

}

}

</script>

</HEAD>

<BODY>

<form id="myform">

<input type="text" name="aa"/>

<input type="text" name="bb"/>

<select><option>aaa</option><option>bbb</option></select>

<input type="button" value="提交" onclick="mysubmit()"/>

</form>

第二种就是直接比较form表单加载前和提交时的数据

1.在表单加载(初始化)就把表单序列化成json格式数据

2.点击提交按钮在把表单序列化成json格式数据然后进行比较

$(function(){

var dataformInit = $("#form1").serializeArray();

var jsonTextInit = JSON.stringify({ dataform: dataformInit });

$("#bt_submit").click(function(){

var dataform = $("#form1").serializeArray();

var jsonText = JSON.stringify({ dataform: dataform });

if(jsonTextInit==jsonText) {

alert("表单值没有改变!");

return false;

}else{

alert("表单值改变了!");

return false;

}

})

})

JQ判断from表单是否修改两种方式

相关推荐