表單提交中的jQueryUI模式確認對話框

我想在用戶提交表單時得到一個模式確認對話框。我的邏輯思維方式是抓住表單提交。我的代碼如下，表單提交中的jQueryUI模式確認對話框

$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      //$(this).dialog('close'); 
      return true; 
     }, 
     'Cancel': function(){ 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

$('#completeform').submit(function(e){ 
    e.preventDefault(); 
    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      $('#multi-dialog-confirm').dialog('open'); 
     } 
    } 
    //return false; 
});

所以，我先設置我的對話框。這是因爲我很確定對話框的範圍需要與調用它的函數處於同一級別。

但是，問題是，當你點擊'確認'時沒有任何反應。提交操作不會繼續。我也試過$('#completeform').submit();，這似乎並不奏效。我試圖刪除.preventDefault（）以確保表單提交沒有完全取消，但它似乎沒有區別，並返回false。

未選中該框，顯示並警示正常。可能會在某個時候變成對話框;），單擊「取消」將關閉對話框並保留在頁面上，但難以捉摸的「確認」按鈕似乎不會繼續表單提交事件。

如果有人能幫忙，我會很高興與你分享我的午餐！ ;）

來源

2010-04-14 David Yell

解決方案很簡單！通過在函數中使用document.formname.submit（），我可以繞過jQuery範圍，並直接提交表單，這很好！令人驚訝的火腿三明治可以做什麼 – 2010-04-14 12:23:30

我會將此視爲解決方法，而不是解決方案。我建議你嘗試理解我的解決方案，並使用它，因爲它是合乎邏輯的，因此以更一致的方式工作。 – Simeon 2010-04-14 13:33:03

想我應該包括我的代碼在這裏，萬一有人發現它有幫助。

/* 
* Setup the confirm multiple completions dialog 
*/ 
$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      $(this).dialog('close'); 
      document.completeform.submit(); 
     }, 
     'Cancel': function(){ 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

/* 
* When completing an item on the search page, validate and confirm 
*/ 
$('#completeform').submit(function(e){ 
    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      e.preventDefault(); 
      $('#multi-dialog-confirm').dialog('open'); 
     }else{ 
      return true; 
     } 
    } 
    //return false; 
});

來源

2010-04-14 12:30:30

當在對話框中進行提交時，再次執行提交代碼。

試試這個：

$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      dialogueIsSubmitting = true; 
      $('#completeform').submit(); 
      return false; 
     }, 
     'Cancel': function(){ 
      dialogueOpen = false; 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

var dialogueIsSubmitting = false; 

$('#completeform').submit(function(e){ 
    if(dialogueIsSubmitting) return true; 

    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      $('#multi-dialog-confirm').dialog('open'); 
     } 
    } 
    return false; 
});

來源

2010-04-14 12:25:36 Simeon

表單提交中的jQueryUI模式確認對話框

回答

相關問題