JavaScript判断用户是否对表单进行了修改的方法


Posted in Javascript onMarch 18, 2015

本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法。分享给大家供大家参考。具体分析如下:

这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用户是否要保存表单的内容,是非常有用的代码。

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var type = element.type;
  if (type == "checkbox" || type == "radio") {
   if (element.checked != element.defaultChecked) {
    return true;
   }
  }
  else if (type == "hidden" || type == "password" ||
       type == "text" || type == "textarea") {
   if (element.value != element.defaultValue) {
    return true;
   }
  }
  else if (type == "select-one" || type == "select-multiple") {
   for (var j = 0; j < element.options.length; j++) {
    if (element.options[j].selected !=
      element.options[j].defaultSelected) {
     return true;
    }
   }
  }
 }
 return false;
}

使用示例:当退出浏览器是,如果用户修改了表单,则提醒用户是否要保存

window.onbeforeunload = function(e) {
 e = e || window.event; 
 if (formIsDirty(document.forms["someForm"])) {
  // For IE and Firefox
  if (e) {
   e.returnValue = "You have unsaved changes.";
  }
  // For Safari
  return "You have unsaved changes.";
 }
};

下面是一个完整的范例代码

Click on below button. Now change some values in form and click the button again.

<form name="fooForm">

    <input type="text" name="t"><br>

    <input type="text" name="2" value="default"><br>

    <select name="some">

        <option value="fooo" selected="">foo</option>

        <option value="bar">bar</option>

    </select><br>

</form>

    <button onclick="alert(formIsDirty(document.fooForm))">Click to check if Form is Dirty</button>

<br>

<script>

function formIsDirty(form) {

  for (var i = 0; i < form.elements.length; i++) {

    var element = form.elements[i];

    var type = element.type;

    if (type == "checkbox" || type == "radio") {

      if (element.checked != element.defaultChecked) {

        return true;

      }

    }

    else if (type == "hidden" || type == "password" ||

             type == "text" || type == "textarea") {

      if (element.value != element.defaultValue) {

        return true;

      }

    }

    else if (type == "select-one" || type == "select-multiple") {

      for (var j = 0; j < element.options.length; j++) {

        if (element.options[j].selected !=

            element.options[j].defaultSelected) {

          return true;

        }

      }

    }

  }

  return false;

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 #Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 #Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
函数式编程入门实践(一)
2019/04/20 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python进阶教程之动态类型详解
2014/08/30 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
PHP中如何使用Cookie
2015/10/28 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
中学政教处工作总结
2015/08/13 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis