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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
javascript document.referrer 用法
Apr 30 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Vue基础配置讲解
Nov 29 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP 快速排序算法详解
2014/11/10 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python中functools模块函数解析
2017/03/12 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
python re模块常见用法例举
2021/03/01 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
租房合同协议书
2014/04/09 职场文书
演讲稿的写法
2014/05/19 职场文书
求职简历自荐信
2014/06/18 职场文书
理财计划书
2014/08/14 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python