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

最新推荐文章于 2022-05-23 23:18:07 发布

海贝里的灰尘

最新推荐文章于 2022-05-23 23:18:07 发布

阅读量3.2k

点赞数 1

文章标签：判断表单是否修改

本文链接：https://blog.csdn.net/u013355638/article/details/81215970

版权

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

1.如果用户改变表单域的值，然后再修改回原始值，程序仍将认为表单的修改已经发生。
2.如果表单项的值是通过Javascript动态修改的，onchange事件不会被自动触发。
3.为每一个表单元素增加onchange事件会引起性能问题，特别是较大的表单。
4.如果将表单元素从DOM中增加或移除，你需要相应的注册或移除事件侦听。
5.checkbox和radio的onchange事件在某些浏览器下不能按预期工作（你应该知道是哪个浏览器）。
6.除了onchange，还有更简单有效的方案。

</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="提交" οnclick="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;
}
})
})