CODEWITHSUNDEEP
jqueryajax
samwatt
samwatt

Reputation: 53

jquery show dialog box on ajax form success

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

Upvotes: 2

Views: 1802

Answers (1)

Sam
Sam

Reputation: 4487

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.

Upvotes: 1

Related Questions