如何解決layer關閉彈出窗口觸發表單提交的問題

這篇文章主要介紹如何解決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關閉彈出窗口觸發表單提交的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！