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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
js实现弹幕墙效果
Dec 10 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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获取文件后缀名的三个函数
2012/10/15 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python距离测量的方法
2018/03/06 Python
Python3中的json模块使用详解
2018/05/05 Python
python3处理含有中文的url方法
2018/05/10 Python
pip命令无法使用的解决方法
2018/06/12 Python
python实现猜拳小游戏
2020/04/05 Python
python检测服务器端口代码实例
2019/08/31 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python从PDF中提取数据的示例
2020/10/30 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
店铺转让协议书(2014版)
2014/09/23 职场文书
入党函调证明材料
2014/12/24 职场文书
谢师宴学生致辞
2015/07/27 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
英镑符号 £
2022/02/17 杂记