?
Solved

submiting a form with jQuery Validate and Dialog plugins.

Posted on 2009-04-03
10
Medium Priority
?
2,769 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

741 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