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 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python使用MD5加密字符串示例
2014/08/22 Python
python 爬取微信文章
2016/01/30 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
团组织关系介绍信
2014/01/12 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
邀请书模板
2015/02/02 职场文书
军训个人总结
2015/03/03 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
起诉意见书范文
2015/05/19 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL