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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript获取表单名称（name）的方法

    本文实例讲述了Javascript获取表单名称(name)的方法.分享给大家供大家参考.具体如下: 下面的代码通过表单的name属性获得表单名称 <!DOCTYPE html> <html> <body> <form id="frm1" name="form1"> First name: <input type="text" name="fname" value="

  • javascript将异步校验表单改写为同步表单

    javascript将异步校验表单改写为同步表单

    同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据) 异步校验表单的初衷 提升用户体验 最大化减少网络请求,减轻服务器压力 下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号) 校验工号 复制代码 代码如下: var BASE_PATH = '${rc.contextPath}';

  • javascript实现回车键提交表单方法总结

    本文实例总结了javascript实现回车键提交表单方法.分享给大家供大家参考.具体分析如下: 第一种方法:javascript实现 复制代码 代码如下: <html> <head> <title> javascript 实现回车键提交表单</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <scr

  • JavaScript实现重置表单（reset）的方法

    本文实例讲述了JavaScript实现重置表单(reset)的方法.分享给大家供大家参考.具体如下: 下面的代码可以对表单内的输入数据进行重置 <!DOCTYPE html> <html> <head> <script> function formReset() { document.getElementById("frm1").reset(); } </script> </head> <body> &

  • JavaScript获得表单target属性的方法

    本文实例讲述了JavaScript获得表单target属性的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.asp" target="_blank"> First name: <input type="text" name="fnam

  • javascript实现节点（div）名称编辑

    节点html代码如下: 复制代码 代码如下: <div class="img_1" id="img_1" >      <input type="image" class="img_1" src="img/cump.png"></input>      <div class="noteText" id="noteTxt" ty

  • JavaScript判断表单提交时哪个radio按钮被选中的方法

    本文实例讲述了JavaScript判断表单提交时哪个radio按钮被选中的方法.分享给大家供大家参考.具体分析如下: 这里的表单提交时通过JavaScript判断哪个radio按钮被选中了 <script type="text/javascript"> function findButton() { var myForm = document.forms.animalForm; var i; for(i=0;i<myForm.marsupial.length; i++

  • 使用javascript获取页面名称

    代码很简单,就不多废话了,奉上代码: 复制代码 代码如下: // 取当前页面名称(不带后缀名) function getPageName1() {     var a = location.href;     var b = a.split("/");     var c = b.slice(b.length-1, b.length).toString().split(".");     return c.slice(0, 1); }  //取当前页面名称(带后缀名

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

    本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用户是否要保存表单的内容,是非常有用的代码. function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element

  • 使用JavaScript判断用户输入的是否为正整数(两种方法)

    在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp(type); var flag=r.test(subjectHour.value); if(!flag){ alert("课时应为正整数"); subjectHour.focus(); return false; } 方法二: var type="^[0-9]*[1-9][0-9

  • javascript 判断用户有没有操作页面

    javascript 判断用户有没有操作页面 用js判断用户有没有操作页面,我们所要做的就是整理我们的思路. 一.思路 用户有没有操作界面,我们可以从页面在规定时间内有没有触发事件去考虑.比如用户有没有点击,有没有按键,有没有滚动鼠标滚轴.用户有没有移动鼠标等等.如果用户没有进行这些操作,那么我们可以大概的认为用户没有操作页面.我们可以给一个定时器.来记录在规定时间内用户有没有触发这些事件.我直接贴代码,代码的具体含义,我就不再讲解,思路大概就是这样. 二.代码演示 <!DOCTYPE html

  • JSP针对表单重复提交的处理方法

    本文实例讲述了JSP针对表单重复提交的处理方法.分享给大家供大家参考,具体如下: 1. 在生成表单时执行如下: 复制代码 代码如下: session.setAttribute("forum_add", "forum_add"); 2. 提交处理时作如下判断 if (isRedo(request, "forum_add")) { //提示重复提交,作相关处理 } 相关函数: /** * 判断是否为重复提交 * 1,检查Session中是否含有指定名

  • JavaScript判断一个字符串是否包含指定子字符串的方法

    本文实例讲述了JavaScript判断一个字符串是否包含指定子字符串的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码,为String对象定义了一个contains方法用于判断字符串是否包含子字符串,非常有用. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) {

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

  • JavaScript 判断用户输入的邮箱及手机格式是否正确

    复制代码 代码如下: /* * 功能:判断用户输入的邮箱格式是否正确 * 传参:无 * 返回值:true or false */ function form_check() { var email = document.getElementById("email").value; //获取邮箱地址 //判断邮箱格式是否正确 if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) { alert("邮箱格

  • 用JavaScript 判断用户使用的是 IE6 还是 IE7

    var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7

  • javascript判断用户浏览器插件安装情况的代码

    复制代码 代码如下: document.writeln("<TABLE BORDER=1><TR VALIGN=TOP>", "<TH ALIGN=left>i", "<TH ALIGN=left>名称", "<TH ALIGN=left>文件名", "<TH ALIGN=left>描述", "<TH ALIGN=lef

  • javascript判断单选框或复选框是否选中方法集锦

    提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name

随机推荐