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;
}
})
})