How to submit the form using JQuery UI?

Question

I have a form in html with a default submit button. After the form is submitted, a php file is run (with action = homelocation). I decided to use JQuery UI dialog to display the form. I have 2 default buttons there - one to save and one to close the dialog. Can anyone tell me how to assign the form submit button action to the JQuery dialog button(i.e. replace the submit button from the form with the one in the dialog)? Here's my code:

 <div id="userdialog" title="Add">
 <form id="add" action="engine.php" method="POST">
 <input type="hidden" name="action" value="homelocation" id="action">
     <button type="submit">Save this location</button>
    </form></div>

Dialog:

 $('#userdialog').dialog({

    width: 260,
            position: [250,100],
            buttons: {
                       "Save": function() {
                          HERE GOES THE REQUIRED FUNCTION
                            $(this).dialog('close'); },

                                     "Don't Save": function() {
                        $(this).dialog("close");
                    }
                }

            });

Answer 1

You can do this:

$('#userdialog').dialog({
  width: 260,
  position: [250,100],
  buttons: {
    "Save": function() {
       $(this).find("form").submit();
       $(this).dialog('close'); },
    "Don't Save": function() {
       $(this).dialog("close");
    }
  }
});

Alternatively, you can call $("#add").submit(); to use the ID explicitly, the version above looks inside the current dialog for any forms.