jQuery UI Dialog box after form submit

Question

I have a form which users may submit information. The submission can be successful or it's not successful.

In either case, I want a dialog box to tell the user if it was a success or not.
The page loads itself on form submission. Ergo, the page is not submited through Ajax.

I know how to trigger the dialogbox by clicking a button / link etc. But how can I use jQuery UI Dialog after form submission?

UPDATE

I have found the solution. You can read the solution in this thread.

Answer 1

You should be able to bind an event handler to the submit event on the form.

$("form_name_here").bind("submit", function(){$("dialog").open()})

Or whatever the method is to show the dialog. I can't remember off the top of my head. The other option would be go use the jQuery form plug-in as I'm assuming you're using ajax to submit the form. With that you can pass methods in for all of the events related to form submissions. Before, after, success, fail, etc.

Answer 2

Don't use a type='submit', but rather bind a jQuery event to a normal button, process the form via ajax. When you get results via ajax you can either show the results from the ajax request on the dialog (PHP generates the message on the dialog), or you can have a conditional that checks whether it was successful or not and then take the appropriate actions.

Here's an example with an in the form. (the coding is a bit sloppy)

$(document).ready(function() {
     $('#submit').click(function() {
      name = $('#name').val();
      email = $('#email').val();
      number = $('#number').val();
      message = $('#message').val(); 
      $.post("contact.php", //PHP file to send POST to
      { ajax: 'yes', name: name, email: email, number: number, message: message }, //POST fields to send
      function(returned) { //What to do if the POST finishes. 'returned' is the value recieved back from the script.
       if (returned == 'done') {
        //PHP script returns the word 'Done'
         alert('Submit successful');
        });     
       } else {
        alert('An error has occured');
}});});});