layer關(guān)閉彈出窗口觸發(fā)表單提交問(wèn)題的處理方法

更新時(shí)間：2019年09月25日 09:05:57 作者：蔚藍(lán)色天空sky

今天小編就為大家分享一篇layer關(guān)閉彈出窗口觸發(fā)表單提交問(wèn)題的處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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()">關(guān)閉</button>
 </div>
</form>

closeCurrForm函數(shù)：

//關(guān)閉當(dāng)前窗口
function closeCurrForm(){
  //獲取窗口索引
  var index = parent.layer.getFrameIndex(window.name); 
  parent.layer.close(index);
}

2、問(wèn)題及原因和解決方法

問(wèn)題：上面的代碼在點(diǎn)關(guān)閉按鈕后，會(huì)確發(fā)提交表單請(qǐng)求，會(huì)將表單的信息進(jìn)行保存操作。但關(guān)閉按鈕是不需求執(zhí)行保存操作的。

原因：關(guān)閉按鈕沒(méi)有標(biāo)識(shí)type屬性，系統(tǒng)會(huì)默認(rèn)其type屬性為submit,所以點(diǎn)擊它就會(huì)觸發(fā)保存操作。

解決方法：為關(guān)閉安鈕添加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" >關(guān)閉</button>
 </div>
</form>

觸發(fā)事件代碼：

$(document).ready(function () {
  //關(guān)閉當(dāng)前窗口
  $("#closeBtn").click(function(){
    //獲取窗口索引
    var index = parent.layer.getFrameIndex(window.name); 
    parent.layer.close(index);
  });
)};

這樣處理后，點(diǎn)關(guān)閉按鈕后就直接關(guān)閉窗口，不再執(zhí)行保存操作。

以上這篇layer關(guān)閉彈出窗口觸發(fā)表單提交問(wèn)題的處理方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼
收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼，學(xué)習(xí)js的朋友可以參考下。并可以自定義的對(duì)字符串與array數(shù)據(jù)，進(jìn)行擴(kuò)展。
2010-12-12
基于JS實(shí)現(xiàn)Flappy?Bird游戲的示例代碼
Flappy?Bird是13年紅極一時(shí)的小游戲，即摁上鍵控制鳥(niǎo)的位置穿過(guò)管道間的縫隙。本文將用JS實(shí)現(xiàn)這一經(jīng)典的游戲，需要的可以參考一下
2022-04-04
微信小程序scroll-x失效的完美解決方法
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)，但是在實(shí)際開(kāi)發(fā)中會(huì)遇到各種問(wèn)題，下面小編給大家?guī)?lái)了微信小程序scroll-x失效的完美解決方法,需要的朋友可以參考下
2018-07-07
Table隔行變色的JavaScript代碼
用js實(shí)現(xiàn)的table隔行變色，鼠標(biāo)放上去有變色顯示，需要的朋友可以參考下。
2011-01-01
JS跨域總結(jié)
JS跨域總結(jié)，主要是解決js中跨域訪問(wèn)的我問(wèn)題
2012-08-08
javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼,需要的朋友可以參考下
2014-02-02
移動(dòng)前端圖片壓縮上傳的實(shí)例
下面小編就為大家分享一篇移動(dòng)前端圖片壓縮上傳的實(shí)例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起小編過(guò)來(lái)看看吧
2017-12-12
微信小程序之五種頁(yè)面跳轉(zhuǎn)方法小結(jié)
本文主要介紹了微信小程序之五種頁(yè)面跳轉(zhuǎn)方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
WEB 瀏覽器兼容推薦收藏
這是我總結(jié)多年的一個(gè)小文檔，最近看見(jiàn)有人咨詢?yōu)g覽器兼容的問(wèn)題，就貢獻(xiàn)出來(lái)。
2010-05-05
javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
html5為表單元素(type為text/password/search/url/telephone/email)新增了一個(gè)placeholder屬性，為輸入框提供一種提示
2012-01-01