layer关闭弹出窗口触发表单提交问题的处理方法

更新时间：2019年09月25日 09:05:57 作者：蔚蓝色天空sky

今天小编就为大家分享一篇layer关闭弹出窗口触发表单提交问题的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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关闭弹出窗口触发表单提交问题的处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Bootstrap fileinput文件上传预览插件使用详解
这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Json按某个键的值进行排序
这篇文章主要介绍了json按某个键的值进行排序的相关资料,代码简单易懂，非常不错，需要的朋友可以参考下
2016-12-12
webpack 样式加载的实现原理
本篇文章主要介绍了webpack 样式加载的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
js本地图片预览实现代码
这篇文章主要为大家详细介绍了js本地图片预览实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
通过循环优化 JavaScript 程序
这篇文章主要介绍了通过循环优化 JavaScript 程序，对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。下面我们来学习一下吧
2019-06-06
JavaScript中window和document用法详解
这篇文章主要介绍了JavaScript中window和document用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
JavaScript开发的七个实用小技巧(很有用)
日常开发中,我们经常需要编写大量的js代码,下面这篇文章主要给大家介绍了关于JavaScript开发的七个实用小技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
浅谈JS的原型和原型链
在原型链中，Object是顶级公民，function是一级公民，其他的是二级公民，先记住这句话，下面我们来讲解一下为什么这么说。
2021-06-06
JS面试题中深拷贝的实现讲解
在本篇文章里小编给大家分享的是关于JS面试题中深拷贝的实现讲解，需要的朋友们可以参考下。
2020-05-05
Javascript/Jquery——简单定时器的多种实现方法
本文为大家详细介绍下使用Javascript/Jquery实现简单的定时器，方法有多种，大家可以根据自己的喜好自由选择，希望对大家有所帮助
2013-07-07