jquery show dialog box on ajax form success

Question

Hi, I have a number of form sections which a user progresses through. Each one is handled via AJAX, and on success, the next form is loaded via AJAX. I now have a situation where on a couple of sections I want to show a dialog box once the form has been successfully processed via AJAX. The process would be the user fills out the form, clicks submit, jquery uses AJAX to validate that the form was processed ok, then, before loading the next form, I want to trigger a dialog box (e.g thanks for signing up) which allows the user the option to read the content then to click a button/link to continue with the next part of the form. I'm not sure the best way to go about this, here is how my code works at the moment:

Can anyone suggest a good way of handling this type of thing, given the way I'm doing things below.

 $(".form_container form").validationEngine({
                        ajaxSubmit: true,
                        ajaxSubmitFile: $('.form_container form').attr('action'),
                        success: function(){
                            var href = $('input.next').attr("rel"); //use rel to store next url to be loaded
                            hash = href.replace(/^.*#/, '');
                            $.historyLoad(hash); //loads next section via ajax
                        },
                       failure..etc

Answer 1

I'd use colorbox ( http://colorpowered.com/colorbox ) for the modal (personal preference).

For the actual submission I would set ajaxSubmit to false and submit the form AFTER the user has verified they are happy with what they entered and clicked the button/link.

So the process would be:

1. User clicks submit,
2. The form is validated (NOT submitted via AJAX),
3. On successful validation open colorbox,
4. When the user clicks the confirm button/link submit the form via AJAX.