javascript检查表单数据是否改变

有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧,其中如果修改了表单的内容则返回true,没修改表单的内容则返回false。代码如下:

  1. function formIsDirty(form) {
  2. for (var i = 0; i < form.elements.length; i++) {
  3. var element = form.elements[i];
  4. var type = element.type;
  5. if (type == "checkbox" || type == "radio") {
  6. if (element.checked != element.defaultChecked) {
  7. return true;
  8. }
  9. }
  10. else if (type == "hidden" || type == "password" || type == "text" || type == "textarea") {
  11. if (element.value != element.defaultValue) {
  12. return true;
  13. }
  14. }
  15. else if (type == "select-one" || type == "select-multiple") {
  16. for (var j = 0; j < element.options.length; j++) {
  17. if (element.options[j].selected != element.options[j].defaultSelected) {
  18. return true;
  19. }
  20. }
  21. }
  22. }
  23. return false;
  24. }
  25. window.onbeforeunload = function(e) {
  26. e = e || window.event;
  27. if (formIsDirty(document.forms["someForm"])) {
  28. if (e) {
  29. e.returnValue = "You have unsaved changes.";
  30. }
  31. return "You have unsaved changes.";
  32. }
  33. };
时间: 2024-08-24 17:10:24

javascript检查表单数据是否改变的相关文章

__x__(64)0925第十天__ JavaScript 对象的 toString() 方法改变输出

JavaScript 对象的 toString() 方法改变输出 在平常,我们 console.log(对象);    // 会打印 [Object Object] 但是我们想要更详细的输出,此时,我们可以重写 对象.toString() 方法 Person.toString = function(){ return "Person ["+this.name+" , "+this.gender+","+this.age+"]"

Web开发技术&mdash;&mdash;JavaScript HTML DOM1(基础、改变HTML、改变CSS)

JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改

二、JavaScript之点击按钮改变HTML样式 (CSS)

一.代码如下 二.点击前 三.点击后 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <h2>JavaScript 能够做什么</h2> <p id="demo">JavaScript 能够改变 HTML 元素的样

Javascript操作div颜色的改变

<!DOCTYPE html> <html> <head> <title>this is javascript</title> <style type="text/css"> #div1{background: aqua;       height:200px;       width:200px;      } </style> <script type="text/javascrip

javascript完美实现图片拖动改变顺序

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">&l

21个值得收藏的Javascript技巧

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: 1 2 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:a

21个值得收藏的javas技巧

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); 输出:apple,

【JavaScript】轻易改变的背景和字体颜色页面

JavaScript,点击button改变页面背景和字体颜色,网页有N颜色的变化button.点击不同button,网页字体和背景将被改变为不同的颜色. 非常easy的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的button,当中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的button.网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起色的,但原理全然一样就不多写button了. 二.基本思想 关键是对bo

JavaScript进阶(五)

有聚焦,肯定就有失焦.onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序.如下代码,网页中有用户和密码两个文本框.当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用message()<!DOCTYPE HTML><head><meta http-equiv="Content-Type" content="text/html