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 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
原生js实现二级联动菜单
Nov 27 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 Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
项目建议书范文
2014/05/12 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
风之谷观后感
2015/06/11 职场文书
户外拓展训练感想
2015/08/07 职场文书
优质护理服务心得体会
2016/01/22 职场文书
合作协议书格式范本
2016/03/21 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL