Attach modal dialog submit handlers to multiple forms

Attach modal dialog submit handlers to multiple forms

I'd like to attach submit handlers involving the modal dialog widget to all forms on a page (which I have achieved), and have it submit the form depending on whether the user submits or cancels the action (which I hope to achieve with your help).

My idea is that I do not need to explicitly refer to the form to be submitted by some #identifier, but instead may refer to the correct form dynamically from the event or this arguments. But I'm not sure this is really possible as this is my first attempt at jQuery.

There's a complete page here, which works, except for the form submission. To be more precise:

* dialog attachment works
* dialog closing works (does so automatically)
* dialog cancel button works (by virtue of event.preventDefault())
* dialog submit button does not work

Here's the page, self-contained and ready to be tried out at home; note the "unsure" markers, this is where I think I'm going wrong but don't know how to go right:
  1. <html>
    <head>
    <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>
    <script type="text/javascript">
    $(document).ready( function() {
     //alert("ready!");
     $("#dialog-confirm").hide();
     // add submit handlers to all forms of class "delmonpost"
     $(".delmonpost").submit( function(event) {
      event.preventDefault(); // unsure
      var myform = $(this);
      $( "#dialog-confirm" ).dialog({
       resizable: false, height: 100, modal: true,
       buttons: {
        "Delete item": function() {
         $( this ).dialog( "close" );
         myform.submit(); // unsure
        },
        Cancel: function() {
         $( this ).dialog( "close" );
        }
       }
      });
     });
    });
    </script>
    </head>
    <body>
    <p>Link to <a href="http://jquery.com/">jQuery</a></p>
    <!-- first form -->
    <form class="delmonpost" method="post" action="http://jquery.com/">
    <div><input name="item" type="hidden" value="item1"/>
    <input name="delete" type="image" src="http://jqueryui.com/favicon.ico" />
    Item 1 </div></form>
    <!-- second form -->
    <form class="delmonpost" method="post" action="http://jquery.com/">
    <div><input name="item" type="hidden" value="item2"/>
    <input name="delete" type="image" src="http://jqueryui.com/favicon.ico" />
    Item 2 </div></form>
    <!-- confirmation dialog -->
    <div id="dialog-confirm" title="Delete item? "><p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
    </span> Do you really want to delete this item?</p></div>
    </body>
    </html>

















































Thanks for any light you can shed on this.

Michael