1. 程式人生 > >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" onclick="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); }); )};

這樣處理後,點關閉按鈕後就直接關閉視窗,不再執行儲存操作。