编辑表单后离开本页面时做提示(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实现离开页面前提示功能【附jQuery实现方法】 主要介绍了JavaScript实现离开页面前提示功能,结合具体实例形式分析了javascript实现针对关闭页面的事件响应原理与操作技巧,并附带jQuery的相应实现方法,需要的朋友可以参考下 立即下载

相关推荐

WSL2 Ubuntu 22.04安装NVIDIA驱动避坑指南:从驱动版本选择到CUDA环境验证

本文详细介绍了在WSL2 Ubuntu 22.04中安装NVIDIA驱动和配置CUDA环境的完整流程,包括驱动版本选择、环境变量设置以及常见问题解决方案。通过本指南,用户可以避免常见的安装陷阱,确保GPU加速环境正确配置,适用于深度学习开发和CUDA编程。

weixin_28419039的博客 463

oracle vue 退出,vue实现表单未编辑或未保存离开弹窗提示功能

说明最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示。这个功能,可以用watch监听表单数据。当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户输入或编辑了数据,进而出现弹窗提示,让用户选择是否离开;当数据没发生变化,则不必提示。确认离开提示框实现效果先实现一个确认离开提示框,效果如下:实现代码:当前数据未保存,是否离开?flatla...

weixin_30578673的博客 496

COMSOL仿真教程—激光烧蚀

本例使用二维模型,将来自激光的入射热通量模拟为金属表面上空间分布的热源,从而得到金属的烧蚀过程和瞬态温度分布。

qq_40977332的博客 2万+

离开编辑页面提示,并且在提交时不进行提示的jquery

该jquery在新增和修改信息页面的时候会用到,当点击任何一个跳转页面,都会跳出弹框进行提示,提示的内容会根据浏览器的不同而有所不同 window.onbeforeunload = function() { return "确认离开当前页面吗?未保存的数据将会丢失"; } /** *提交表单前销毁提醒事件 */ func

zhao_zang的博客 577

深入Luckfox Pico的Web界面:从Angular前端到CGI后端的RV1106 IPCWeb全栈解析

本文深入解析了基于瑞芯微RV1106芯片的Luckfox Pico设备上,IPCWeb全栈解决方案的架构与部署。详细介绍了如何通过SDK编译配置,将现代Angular前端框架与高效的C++ CGI后端结合,并利用nginx和FastCGI在嵌入式环境中构建稳定、高性能的Web管理界面,为物联网设备开发提供了完整的实战参考。

3a9bq4r8t2y的博客 277

SAP PI实战:5分钟搞定REST适配器同步接口配置(含Postman测试技巧)

本文详细介绍了如何在SAP PI中快速配置REST适配器同步接口,包括ESR设计、集成流配置及Postman测试技巧。通过实战步骤和关键参数设置,帮助开发者高效实现系统集成,特别适合需要实时数据交互的业务场景。

weixin_33738555的博客 485

js监听离开或刷新页面时的弹窗提示

一、使用场景。 填写表单时内容,当离开页面或者刷新的时候回丢失页面的内容,因此人性化的设计该有一个提示。所以这样的功能也就应用而生了。 二、思路。 1,页面内容改变。2,离开或刷新浏览器触发事件。 三、知识点。 1,如图需要填写内容的地方(即会发生改变的地方)包括input[radio],input[text],select,textarea几种。 2,触发事件选用onchange。 3...

qq_40805231的博客 3118

2026年软件测试职业院校技能大赛—ERP管理平台-采购入库模块Bug定位与查找

竞赛对接软件测试相关标准,以“ERP管理平台” 为被测系统,围绕软件测试领域的主流技术及工具,考查选手面 对实际问题的综合分析能力,对测试文档、测试用例的设计能力, 对单元测试、自动化测试、性能测试、接口测试等测试工具及方 法的掌握程度,检验选手团队协作能力、组织规划能力、方法运用能力等。

我是网络安全兼技能大赛工程师,专注网络安全技术学习与技能大赛实战!持续分享最新的技术文章,帮你少走弯路,一起在技术赛道上进步~ 195

jquery实现页面离开时检测当前页面是否被修改,修改则提示

代码如下: //检测表单是否已经修改过 $(window).bind('beforeunload',function(){ if( IsModified() ){ return '您输入的内容尚未保存,确定离开此页面吗?'; } }); //检测页面表单是否已编辑过 function IsModified() { var result = false;

qw_xingzhe的专栏 7192

AgentScope 2.0 API完全指南:构建企业级AI智能体应用的技术实践

本文系统梳理AgentScope 2.0框架的完整API体系,涵盖智能体核心引擎、统一模型适配层、工具系统、消息协议、权限控制与工作空间管理等七大核心模块。通过深入的源码级分析与架构图示,详细解读Agent类的推理-行动循环、ChatModelBase的多模型抽象、Toolkit的工具管理机制、ContentBlock的多模态内容表达、PermissionEngine的安全决策流程,以及Local/Docker/E2B三种工作空间实现。文章还提供了智能客服系统的完整实战案例,展示从自定义工具开发到流式服务部

program哲学 455

【论文汇总】Diffusion Models视频生成/视频编辑/可控视频生成/跨模态视频生成

本文总结了Diffusion Models视频生成领域相关的工作,目前共收录142篇,持续更新中。

沉迷单车的追风少年 1672

jQuery事件(页面,鼠标,键盘,表单,编辑,滚动)

事件解析 : jQuery基本的事件共有以下6种。 ·页面事件。 ·鼠标事件。 ·键盘事件。 ·表单事件。 ·编辑事件。 ·滚动事件。 事件操作是jQuery的核心。 1....

藜笙的博客 375

YOLOv11改进策略【模型轻量化】| 替换骨干网络 CVPR-2023 FasterNet 高效快速的部分卷积块

本文记录的是基于FasterNet的YOLOv11轻量化改进方法研究。FasterNet的网络结构借鉴 CNN 的设计理念,通过提出的PConv减少推理时的计算和内存成本,同时减少通道数并增加部分比例,降低延迟,并通过后续的PWConv来弥补特征信息可能缺失的问题,提高了准确性。本文在替换骨干网络中配置了原论文中的和六种模型,以满足不同的需求。

Limiiiing的博客 2030

jquery 设置页面元素不可点击、不可编辑、只读(备忘)

$("input").attr('readonly', true); $("textarea").attr('readonly', true); $(':radio').attr('disabled', true); $(':checkbox').attr('disabled', true); $(':button').attr('disabled', true); $('a').remove...

li_jiazhi的博客 6887

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

本文介绍使用jQuery EasyUI的detailview功能实现展开行明细编辑表单的CRUD应用。通过点击行左侧展开按钮,在行下方显示完整编辑表单,适合需要复杂布局的场景。教程详细展示了实现步骤:1)引入EasyUI资源及detailview插件;2)创建DataGrid并启用detailview视图;3)使用detailFormatter和onExpandRow事件加载表单;4)提供新增、保存、删除等功能的JavaScript实现;5)表单设计示例。这种方案既保持了表单布局灵活性,又节省了页面空间。

m0_57545130的博客 621

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

用jQuery和sessionStorage来实现表单的草稿保存功能

在网站的日常使用中,草稿保存是一个比较常见的功能,当用户在编辑表单时,可能需要跳到其他页面填写其他信息,也有可能发生一些其他的意外情况导致页面的资料丢失,使用jQuery和sessionStorage就可以实现简单的草稿保存功能。 在如何添加表单草稿保存功能时,有两个关键问题需要考虑,一是使用什么技术来实现草稿保存,二是草稿保存与实际存入数据库的时间点的逻辑关系。 sessionStorage...

qq_32564967的博客 1850

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

jQuery+bootstrap可视化表单拖拽编辑器:打造个性化表单设计的利器

jQuery+bootstrap可视化表单拖拽编辑器:打造个性化表单设计的利器 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代Web开发中,表单是交互的核心元素之一。而设计一个既美观又实用的表单,往往需要大量的时间和精力。jQuery+bootstrap可视化表单拖拽编辑器正是为了解决这一问题而生。它允许开发者通过直观的拖拽方式,快速构建和管理表单,极大地提高了...

gitblog_06727的博客 1254

表单:校验提示信息的位置

表单:校验提示信息的位置 可以用于表单提交验证时,如果input文本框填写不符合要求的信息,可以在文本框右边显示错误提示。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title>...

weixin_30532973的博客 3873

js实现表单form提交前进行确认提示

在jquery中,可以使用confirm来弹出提示框,实现确认提交。下面小编举例讲解js实现表单form提交前进行确认提示。 工具/原料 js+html 代码编辑器:zend studio 10.0 方法/步骤 新建一个html文件,命名为test.html,用于讲解js实现表单form提交前进行确认提示。 在test.html文件中,使用form标签创建一个表单,并设置其id为myForm,用于测试。 在test.html文件中,在form表

y2020520的博客 3366

一个页面创建多个表单各自提交问题

最近做项目的时候遇到了一个问题。具体情况是这样的——在一个页面中,根据后台传来的数据。我需要动态的创建多的表单。这些表单在编辑或者提交时需要做到互不干扰。如图: 之前在网上看了很多文章,大部分都是关于表格的。由于不是专业前端所以一直困扰了我很久。最后终于找到了解决方案 1️⃣ 解决思路,首先页面中有两个按钮,一个是修改,一个是提交。我们的需求是点击哪一个表单里面的提交按钮。就提交哪个表单。 2️⃣ 先给按钮添加单击点击事件

不爱熬夜的朱霸霸的博客 2378

jquery实现可编辑表单

1.html页面 &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th colspan="2"&gt;鼠标点击表格项就可以编辑&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr

606

Jquery异步提交表单到Action

转载请注明出处:jiq•钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load

jiq•钦's technical Blog 2408

mysql的值赋值给表单_手动提交表单,验证通过后把表单信息显示在页面上存入数据库...

手动提交表单,验证通过后把表单信息显示在页面上存入数据库分类:JQUERY 时间:2013-05-23 已阅读:2355问题描述:当点击edit按钮时,表格里的信息变成input,select,textarea形式的,并且原来的信息作为input,select,textarea的value,此时 按钮的样式发生变化,文字也从Edit变成Save, 如果我需要用到jquery.validate....

weixin_39840235的博客 308

表单提交使用ajax,如何提交表单使用ajax和jquery

在谷歌地图infowindow下面是我的代码在infowindow内提交表单,但是当我点击提交按钮时,页面重新加载并且什么也没有发生。如果我删除使用php post方法提交表单的ajax部分的脚本,它工作正常。我的想法是使用ajax来完成,我不希望我的标记在提交表单时失效。我想在那里。下面 是我的代码如何提交表单使用ajax和jquery$(document).ready(function(){$...

weixin_42514921的博客 259
上一篇: ghs.google.com被封的解决方法
下一篇: 数据库连接查询
baining97
博客等级 码龄19年 0粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值