[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

submiting a form with jQuery Validate and Dialog plugins.

Posted on 2009-04-03
10
Medium Priority
?
2,778 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

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!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

650 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