layer关闭弹出窗口触发表单提交问题的处理方法


Posted in Javascript onSeptember 25, 2019

1、前言

表单的代码:

<form>

 此处理代码略...

 <div id="footer">
  <button class="btn btn-success" name="save" type="submit" title="保存">保存</button>
  <button class="btn btn-success" id="_closed" οnclick="closeCurrForm()">关闭</button>
 </div>
</form>

closeCurrForm函数:

//关闭当前窗口
function closeCurrForm(){
  //获取窗口索引
  var index = parent.layer.getFrameIndex(window.name); 
  parent.layer.close(index);
}

2、问题及原因和解决方法

问题:上面的代码在点关闭按钮后,会确发提交表单请求,会将表单的信息进行保存操作。但关闭按钮是不需求执行保存操作的。

原因:关闭按钮没有标识type属性,系统会默认其type属性为submit,所以点击它就会触发保存操作。

解决方法:为关闭安钮添加type属性,值为button。type=”button”

3、具体代码如:

此处理代码略...

<div id="footer">
  <button class="btn btn-success" name="save" type="submit" title="保存">保存</button>
  <button class="btn btn-success" id="closeBtn" type="button" >关闭</button>
 </div>
</form>

触发事件代码:

$(document).ready(function () {
  //关闭当前窗口
  $("#closeBtn").click(function(){
    //获取窗口索引
    var index = parent.layer.getFrameIndex(window.name); 
    parent.layer.close(index);
  });
)};

这样处理后,点关闭按钮后就直接关闭窗口,不再执行保存操作。

以上这篇layer关闭弹出窗口触发表单提交问题的处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
回顾Javascript React基础
Jun 15 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
js实现模拟购物商城案例
May 18 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 #Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 #Javascript
layui prompt 设置允许空白提交的方法
Sep 24 #Javascript
微信小程序制作扭蛋机代码实例
Sep 24 #Javascript
layer.prompt输入层的例子
Sep 24 #Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 #Javascript
解决layer.prompt无效的问题
Sep 24 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JavaScript 数组详解
2013/10/10 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python 错误和异常小结
2013/10/09 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python求前n个阶乘的和实例
2020/04/02 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python 怎样进行内存管理
2020/11/10 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
实习生体会的自我评价范文
2013/11/28 职场文书
30岁生日感言
2014/01/25 职场文书
经济担保书范文
2014/04/02 职场文书
激励口号大全
2014/06/17 职场文书
大学生见习报告范文
2014/11/03 职场文书
推荐信范文大全
2015/03/27 职场文书
矛盾论读书笔记
2015/06/29 职场文书
公司回复函格式
2015/07/14 职场文书