jQuery ui確認多個表單上的對話框

我在同一頁面上有幾個表單，我想使用相同的代碼向所有人添加一個確認對話框。他們都有一種確認形式，確認對話框的標題應該動態生成（這不是atm工作）。jQuery ui確認多個表單上的對話框

在html中，我有一個對話框，當頁面加載時隱藏起來，它會在調用dialog('open')函數後顯示。

這是我現在已經和它只是不工作，該對話框載荷，但一旦你按下確認，它重複else子句了很多，不提交表單：

var deleteConfirmed = false; 
$('form.confirm-form').submit(function(e) { 
if (! deleteConfirmed) 
{ 
    e.preventDefault(); 
    var title = $(this).find('input.action').val(); 
    var $this = $(this); 
    console.log('title: ' + title); 

    $('#confirm-dialog').attr('title', title); 

    $('#confirm-dialog').dialog({ 
     buttons : { 
      "Confirm" : function() { 
       deleteConfirmed = true; 
       $(this).dialog('close'); 
       $this.submit(); 
      }, 
      "Cancel" : function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    $('#confirm-dialog').dialog('open'); 
} 
else 
{ 
    $(this).submit(); 
    deleteConfirmed = false; 
} 
});

來源

2010-10-07 Becky

編輯

這裏是一個可能的解決方案。由於我在jsFiddle上發現了一些不尋常的行爲，我在一臺實時服務器上測試了它。注意：我刪除了原來的帖子，因爲它沒有涉及多個表格。最有可能的形式提交將提交與AJAX。

x.html來源


<!DOCTYPE html> 
<html> 
<head><title>SO</title> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"> 
</script> 
<link 
    rel="stylesheet" 
    type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/> 
</head> 
<body> 

<div id="dlg1"></div> 
<form method="post" action="/so/x.php" id="frm1" name="frm1"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm1_submit"> 
</form> 
<form method="post" action="/so/x.php" id="frm2" name="frm2"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm2_submit"> 
</form> 
<form method="post" action="/so/x.php" id="frm3" name="frm3"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm3_submit"> 
</form> 


<script type="text/javascript"> 
var $current = { form : null, do_submit : false }; 

$('#dlg1').dialog({ 
    title: "Confirmation", 
    width: 300, 
    height: 200, 
    autoOpen: false, 
    modal: true, 
    buttons : { 
     "Confirm" : function(e){ 
     $current.do_submit = true; 
     $(this).dialog('close'); 
     }, 
     "Cancel" : function(e){ 
     $current.do_submit = false; 
     $(this).dialog('close'); 
     } 
    } 
}); 

$('#dlg1').bind('dialogbeforeclose', function(){ 
    if($current.do_submit){ 
     ($current.form).submit(); 
     $current.form = null; 
     $current.do_submit = false; 
    } 
}); 

$('.submitter_btn').click(function(e){ 
    e.preventDefault(); 
    $current.form = $(this).parents('form:first'); 
    $('#dlg1').dialog('open'); 
}); 


</script> 
</body> 
</html>

x.php

來源


<?php 
echo "HELLO";

來源

2010-10-07 12:54:25 JTP

這確實工作謝謝！儘管在閱讀你的文章之前，我用不同的方式解決了這個問題，但它可能不如你的文章好，但它起作用！當他們確認了這個行爲後，我只是將它們轉發到表單處理的地方，而不是試圖提交表單。這將是非常容易，但如果有一個相反的功能「preventDefault（）」 – Becky 2010-10-08 09:23:58

不客氣。我很高興它有幫助。我有一個類似的要求，用jQuery對話框代替普通的香草JavaScript警告對話框。稍後使用發佈的代碼片段後，我可以分解出分配給$ current的對象字面值的'.bind'和do_submit屬性。至於event.preventDefault（）的反轉或反轉，相關的jQuery API頁面有一些與此http://api.jquery.com/event.preventDefault/相關的有趣評論。 – JTP 2010-10-08 16:09:05

我用自造的驗證，直到我發現this script。它的腦損傷非常小，似乎可以很好地驗證任何類型或組合的表單元素。每個元素只有一個類聲明至少會啓用驗證。要爲每個頁面執行兩個（或更多），您只需爲每個表單ID或名稱實例化一個。挺容易！

來源

2010-10-07 22:13:42 bpeterson76

太棒了。得自己嘗試一下。謝謝你的鏈接。 – JTP 2010-10-07 22:43:57

我的表單驗證都是在kohana內完成的，我想要一些彈出一個確認框，說：「你確定要刪除這個等..」，當用戶選擇刪除的東西，感謝鏈接，雖然！ – Becky 2010-10-08 09:21:20

貝基，我們也在後端做驗證.....這個腳本可以讓你輕鬆做前端驗證。雖然它可能無法回答您的問題，但執行客戶端驗證幾乎總是優先考慮後端，因爲速度更快，並且會中斷用戶體驗。它還可以將點擊保存到您的服務器上。 – bpeterson76 2010-10-08 21:39:10

jQuery ui確認多個表單上的對話框

回答

相關問題