jquery dialog: confirm the click on a submit button

Question

I'm trying to do a confirm dialog using jquery, but the form doesn't get submitted at all, this is what I got:

    <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

If you're using jQuery, then do it properly and avoid inline 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 2

You need to have your dialog button submit the <form>, like this:

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

The rest of your code is correct, but it's currently just closing the dialog and returning, you need to actually submit the form. Also, it's better to do this as a click handler, instead of onclick, like this (updated for comments):

    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;
        });
    });

Then just give your <input> an class of delete, like this:

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