jQuery的对话框：确认在提交按钮点击

Question

我试图使用jQuery做一个确认对话框，但形式没有得到所有提交的，这是我得到：

<script type="text/javascript"> 
    var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        currentForm.submit(); 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

    function ask() { 
     currentForm = $(this).closest('form'); 
     $("#dialog-confirm").dialog('open'); 
    } 
</script> 
<form ... > 
    <input type="submit" value="delete" onclick="ask();return false;" /> 
</form> 

Answer 1

您需要将您的对话框按钮提交<form>，就像这样：

   'Delete all items': function() { 
        $(this).dialog('close'); 
        $("#myForm").submit(); 
       } 

其余的代码是正确的，但它目前只是关闭对话框并返回，您需要实际提交表单。此外，它是更好地做到这一点作为一个单击处理程序，而不是onclick，像这样（更新的评论）：

var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        $(this).dialog('close'); 
        currentForm.submit(); 
       }, 
       'Cancel': function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $(".delete").click(function() { 
      currentForm = $(this).closest('form'); 
      $("#dialog-confirm").dialog('open'); 
      return false; 
     }); 
    }); 

然后，只需给你的<input>的delete一类，像这样：

<input class="delete" type="submit" value="delete" /> 

Answer 2

如果您正在使用jQuery，然后做正确，避免内嵌JavaScript：

$(function(){ 
    $("form").submit(function(){ 
    // return false if you don't want this to be submitted 
    // maybe do a 
    // return ask(); 
    // but with the code provided it doesn't seem 
    // to work like that - ask() is not returning anything at all! 
    }); 
}); 

Answer 3

这为我工作：

$(function() { 
    $("#accordion").accordion({ 
     heightStyle: "content" 
    }); 

    function confirmDialog(title, message, success) { 
     var confirmdialog = $('<div></div>').appendTo('body') 
      .html('<div><h6>' + message + '</h6></div>') 
      .dialog({ 
       modal: true, 
       title: title, 
       zIndex: 10000, 
       autoOpen: false, 
       width: 'auto', 
       resizable: false, 
       buttons: { 
        Yes: function() { 
         success(); 
         $(this).dialog("close"); 
        }, 
        No: function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close: function() { 
        $(this).remove(); 
       } 
      }); 

     return confirmdialog.dialog("open"); 
    } 

    $('form').on('submit', function (e) { 
     e.preventDefault(); 
     var form = this; 

     confirmDialog('Confirm', 'Are you sure?', function() { 
      form.submit(); 
     }); 
    }); 
}); 

参考：http://jsfiddle.net/pmw57/67Ge2/