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 相关文章推荐
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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你的验证码安全码?
2007/01/02 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
python实现ipsec开权限实例
2014/11/11 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python多线程抽象编程模型详解
2019/03/20 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
社团文化节策划书
2014/02/01 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
高中军训感言200字
2014/02/23 职场文书
金融与证券专业求职信
2014/06/22 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
Tomcat用户管理的优化配置详解
2022/03/31 Servers
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang