`
baining97
  • 浏览: 104345 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

编辑表单后离开本页面时做提示(jQuery版)

阅读更多

//编辑表单后离开本页面时做提示(jQuery版)

$.fn.enable_changed_form_confirm = function ( prompt ) {       
    var _f = this;     
 $(':text, :password, textarea', this).each(function() {       
        $(this).attr('_value', $(this).val());       
    });     
     
    $(':checkbox, :radio', this).each(function() {       
        var _v = this.checked ? 'on' : 'off';       
        $(this).attr('_value', _v);       
    });     
     
    $('select', this).each(function() {       
        $(this).attr('_value', this.options[this.selectedIndex].value);       
    });       
           
    $(this).submit(function() {       
        window.onbeforeunload = null;       
    });       

     
    window.onbeforeunload = function() {       
     if(is_form_changed(_f)) {       
            return prompt;       
        }  
    }       
}     
     
function is_form_changed(f) {       
    var changed = false;       
    $(':text, :password, textarea', f).each(function() {       
        var _v = $(this).attr('_value');       
        if(typeof(_v) == 'undefined')   _v = '';       
        if(_v != $(this).val()) changed = true;       
    });       
     
    $(':checkbox, :radio', f).each(function() {       
        var _v = this.checked ? 'on' : 'off';     
        if(_v != $(this).attr('_value')) changed = true;       
    });       
      
    $('select', f).each(function() {       
        var _v = $(this).attr('_value');       
        if(typeof(_v) == 'undefined')   _v = '';       
        if(_v != this.options[this.selectedIndex].value) changed = true;     
    });       
    return changed;       
}

$(function() {       
    $('form').enable_changed_form_confirm( "您确定不保存就离开页面吗?" );       
});

 

 

以上脚本引自网上高手所写,很好用!引用以上js之前需要引入jQuery脚本文件!

 

分享到:
评论

相关推荐

    离开页面时候的警告

    标题中的“离开页面时候的警告”指的是在用户尝试离开一个网页时,网页通过JavaScript或者其他技术显示的提示信息,通常用于确认用户是否真的想要离开,或者提醒用户保存未完成的工作。这种功能常见于在线表单填写、...

    离开页面时检测表单元素是否被修改,提示保存的js代码

    当用户在表单上进行编辑后试图离开页面时,系统会弹出一个提示,询问他们是否确认离开,这样可以防止用户错失保存修改的机会。 首先,我们需要理解JavaScript的`window.onbeforeunload`事件。这是一个在浏览器窗口...

    jquery中在一个页面中弹出编辑对话框的实例

    在jQuery中实现一个页面内的编辑对话框是一种常见的交互设计,它可以提供用户友好的界面来编辑数据,而无需离开当前页面。下面将详细讲解如何在页面中创建这样的功能,并结合给出的"弹出编辑框是实例"这个压缩包文件...

    基于jQuery实现的当离开页面时出现提示的实现代码

    在现代的网络浏览体验中,页面在用户尝试离开时进行提示是一个常见的功能,尤其是当用户在填写表单或进行一些编辑工作而未保存时。这种功能的目的是防止用户的未保存数据在意外或不小心离开页面时丢失。本文将介绍...

    jquery可编辑表格

    3. 当用户完成编辑并离开单元格(通过`blur`事件)时,发送AJAX请求到ASP.NET服务器,更新后台数据库。 4. 在服务器端处理这些请求,验证数据,更新数据库,并根据需要返回响应。 5. 如果需要,还可以使用jQuery的...

    前端项目-jquery.dirtyforms.zip

    这个开源项目旨在帮助开发者在用户尝试离开页面或者刷新时提醒他们保存未完成的表单更改,从而避免了潜在的数据丢失问题。 **jQuery.dirtyforms 主要功能** 1. **实时监测表单变化**:`jQuery.dirtyforms` 持续...

    DW5插件-jQuery_api_for_dwcs5

    输入`.fun`,则会提示jQuery中的方法,如`.click()`、`.fadeIn()`等。 2. **代码片段**:插件还提供了一些常用的jQuery代码片段,如`.append()`、`.hide()`、`.show()`等,通过快捷键或在“插入”菜单中选择,可以...

    前端项目-jquery-idletimer.zip

    1. 用户离开页面检测:如果用户长时间未进行任何操作,可以假设他们可能已经离开了,此时可以清理资源、更新页面状态或发送离开页面的统计数据。 2. 自动保存草稿:在编辑器或表单中,可以设置idletimer来定期保存...

    简约扁平风格jQuery确认对话框插件

    - 数据保存:在编辑表单后,用户离开页面时出现对话框,询问是否保存更改。 - 提示信息:显示重要的通知或警告信息,确保用户看到并作出反应。 ### 五、使用示例 在实际项目中,首先需要引入jQuery库和对话框插件...

    25种JQuery插件

    jqZoom是一款图片预览插件,它可以实现鼠标悬停时的放大效果,让用户在不离开页面的情况下查看产品细节,广泛应用于电商网站。 9. **jUEditor.rar** jUEditor是一个强大的富文本编辑器,它提供了丰富的编辑功能,...

    jquery鼠标事件

    当用户离开当前页面时触发。可用于保存用户状态、清理资源等。 ```javascript $(window).unload(function(){ // 页面即将关闭前的处理逻辑 }); ``` #### 10. `onFocus`:获得焦点事件 元素获得焦点时触发。如...

    Jquery弹出可拖动Div模态层源码20121130

    3. **表单验证**:在提交表单前,模态层可以显示验证提示,帮助用户及时修正错误,提高表单提交的成功率。 总的来说,"Jquery弹出可拖动Div模态层源码20121130"是实现网页动态效果和增强用户体验的有效工具。通过...

    jquery-bubble:一个 JQuery 小部件,用于在弹出气泡(又名工具提示)中显示任何表单元素的上下文相关信息

    jquery-泡泡一个 JQuery 小部件,用于在弹出气泡(又名工具提示)中显示任何表单元素的上下文相关信息。 气泡可以附加到任何元素并自动定位以考虑页面和页面滚动上的目标元素位置,以便它们始终在页面上可见。 气泡...

    jQuery录入商品信息表单特效代码

    同时,他们也可能使用AJAX技术来异步提交数据,这样用户无需离开页面就可以继续添加或编辑商品,提升了用户体验。 在提供的文件列表中,“使用帮助.txt”可能是对如何使用这段代码的详细说明,包括如何引入jQuery库...

    jQuery登录注册框动态切换代码

    在本文中,我们将深入探讨如何使用jQuery实现一个动态的登录注册框切换效果。...我们先来解析标题和描述,然后逐步介绍相关的...当然,实际应用中可能还需要考虑表单验证、错误提示等功能,但这些在此基础上进行扩展即可。

    使用JQuery实现Ctrl+Enter提交表单的方法

    要实现Ctrl+Enter快捷键提交表单,首先需要确保页面中引入了JQuery库,因为下面的代码依赖于这个库。JQuery可以简化对DOM的操作,并且其提供的事件监听和处理机制可以很方便地捕捉键盘事件。 HTML部分定义了文本...

    多浏览器事件[总结].pdf

    2. `onBeforeUnload`:在页面内容即将改变时触发,常用于确认是否离开页面。 3. `onError`:捕获页面加载过程中的错误,如脚本错误或外部数据引用错误。 4. `onLoad`:页面完全加载完成后触发,包括外部文件加载完成...

    鼠标事件列表--html中所有事件的列表

    12. onBeforeUnload:页面即将被卸载或导航离开时触发,常用于确认对话框。 13. onError:捕捉到页面加载过程中的错误,如脚本错误或资源加载失败。 14. onLoad:整个页面加载完成时触发,包括所有外部资源。 15. ...

    JS客户端验证与页面特效制作

    3. **导航菜单**:当鼠标悬停在菜单项上时,显示子菜单,离开时隐藏,增加互动性。 4. **购物车**:用户添加商品到购物车时,实时更新购物车数量,无需跳转页面。 5. **模态框**:在用户触发特定操作时,如删除...

    用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

    当用户完成编辑并离开文本框或按下回车键时,代码会通过AJAX发送一个请求到服务器,以更新数据库中的相应数据。 1. **jQuery选择器与事件绑定**: - `$(".caname").click(function() {...})`:这段代码监听所有...

Global site tag (gtag.js) - Google Analytics