Solved

submiting a form with jQuery Validate and Dialog plugins.

Posted on 2009-04-03
10
2,747 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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
 
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

856 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