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 THICKBOX弹出层插件
Aug 30 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
JS实现轮播图效果
Jan 11 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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/31 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
理解javascript中的闭包
2017/01/11 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python实现kmp算法的实例代码
2019/04/03 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python设置环境变量的作用整理
2020/02/17 Python
python实现PCA降维的示例详解
2020/02/24 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
交通文明倡议书
2014/05/16 职场文书
党员一帮一活动总结
2014/07/08 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年电教工作总结
2015/05/26 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android