Solved

submiting a form with jQuery Validate and Dialog plugins.

Posted on 2009-04-03
10
2,725 Views
Last Modified: 2012-05-06
I have a form that is being valdiated with jQuery validate plugin. On clicking submit, and after form has been succesfully validated, I want a dialog confirmation to appear, then on clicking OK, the form submits.

See my code below.  The Dialog opens fine.  Dialog works fine, but the form does not submit when OK is clicked.

My guess is the .submit() call is sending the process back into the validate() process, causing some kind of loop, but I can't think of any other way to do this.

Any suggestions on what I am doing wrong here will be greatly appreciated.
// Initialize Dialog Box

		$('#dialog').dialog({

			autoOpen: false,

			width: 400,

			modal: true,

			title: 'Confirm Purchase of Credit.',

			close: function() {$('#dialog p').empty();},

			buttons: {

				"Ok": function() {

					$("#purchase_credit").submit();

					$('#dialog p').empty();	

				}, 

				"Cancel": function() { 

					$(this).dialog("close");

					$('#dialog p').empty();	

				} 

			}

		});
 
 
 

// dialog being opened from validate() using the submithandler.

submitHandler: function(form) {

				$('#dialog p').append('Click \'OK\' to confirm Purchase of <b>$' + $("#cc_amount").val() + '</b> Credit.<br><br>This amount will be charged to the Credit Card Entered.');			

				$('#dialog').dialog('open');

			}

Open in new window

0
Comment
Question by:Jay1607
  • 4
  • 3
10 Comments
 
LVL 6

Expert Comment

by:twocandles
ID: 24059205
Add a return value (true or false) at the end of the dialog function.

The form won't submit unless the function you're calling for submitting returns true.
0
 

Author Comment

by:Jay1607
ID: 24059305
Thanks twocandles,

I have stuck "return true;" everywhere I think you might be referring to, but still no go.

Could you show me where this needs to go?

Thank you!
0
 
LVL 6

Expert Comment

by:twocandles
ID: 24060019
I haven't used the validate plugin, but... "dialog p" is the id of your dialog? Can you try removing the space? Sometimes spaces lead to missbehaviours...
0
 

Author Comment

by:Jay1607
ID: 24060098
"dialog p" is a standard CSS selector for "the <p> tag inside the div tag with id="dialog".

This selector is for placement of the text, which is working fine and processing get's past this point without a hitch.  $('#dialog p').empty(); is working fine as the dialog is being emptied, but it is the $("#purchase_credit").submit(); just above this which is not running.

Thanks again.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 6

Expert Comment

by:twocandles
ID: 24060349
Then, can you change the order of your statements? Like this:

                                "Ok": function() {
                                        $('#dialog p').empty();
                                        $("#purchase_credit").submit();
                                },

Submit should be your last statement since your leaving your current page.

0
 

Author Comment

by:Jay1607
ID: 24066645
Hasn't helped.  If I remvoe the .empty() completely, the dialog content are duplicated, which confirms really that the process is just looping back in.

It looks like the problem is not a javascript one, but rather a validation one.    When I submit the form, it goes back into validation which on success then goes back to the dialog and round we go again.

I need to be able to set some kind of bypass on the validation so I can submit the form without running through the validation.
0
 
LVL 35

Accepted Solution

by:
TimYates earned 500 total points
ID: 24185496
As a quick and (maybe dirty) solution, can you add a hidden data item to the form if the user confirms, and check for this before confirming again?

ie:


// Initialize Dialog Box

                $('#dialog').dialog({

                        autoOpen: false,

                        width: 400,

                        modal: true,

                        title: 'Confirm Purchase of Credit.',

                        close: function() {$('#dialog p').empty();},

                        buttons: {

                                "Ok": function() {

                                        $("#purchase_credit").data( '_userconfirmed', true ) ;

                                        $("#purchase_credit").submit();

                                        $('#dialog p').empty(); 

                                }, 

                                "Cancel": function() { 

                                        $(this).dialog("close");

                                        $('#dialog p').empty(); 

                                } 

                        }

                });

 

 

 

// dialog being opened from validate() using the submithandler.

submitHandler: function(form) {

                                if( !$(this).data( "_userconfirmed" ) { 

                                  $('#dialog p').append('Click \'OK\' to confirm Purchase of <b>$' + $("#cc_amount").val() + '</b> Credit.<br><br>This amount will be charged to the Credit Card Entered.');                      

                                  $('#dialog').dialog('open');

                                }

                                else return true ;

                        }

Open in new window

0
 

Author Closing Comment

by:Jay1607
ID: 31566189
Thank you.  
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now