JQuery UI Dialog submit form with multiple form inputs - jquery-ui

Question

I have a form with three inputs: Save, Delete, and Exit. When Delete is clicked, I pop a JQuery UI Dialog box to confirm that the user wants to delete that data. They have two buttons as options: Delete or Cancel. Cancel works fine and closes the Dialog box. If they click Delete, I wish to submit the original form and delete the data as if the Dialog box was not there, which is not working. I click it and nothing appears to happen.
I am attempting to submit the "update_purchase" form but simulate using the "delete_purchase" input to convey information. With the below code, once I click "Delete" on the Dialog box nothing happens; however, if I click "Cancel" to exit the dialog box and then click "Exit" on the original form, I find the entry has been deleted.
Thanks for any and all help.
<form method="post" id="update_purchase" enctype="multipart/form-data" action="{{ url }}">
...
<input type="Submit" name="save" value="Save">
<input type="Submit" name="delete_purchase" id="delete" value="Delete">
<input type="Submit" name="exit_edit" value="Exit">
// Confirm Delete dialog
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
height: 180,
modal: true,
buttons: {
"Delete": function() {
$("#update_purchase").submit( function(eventObj){
$('<input />').attr('type', 'hidden')
.attr('name', "delete_purchase")
.attr('value', "Delete")
.appendTo('#update_purchase');
$( this ).dialog( "close" );
return true;
});
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#dialog").dialog("open");
return false;
});
});