Solved

submiting a form with jQuery Validate and Dialog plugins.

Posted on 2009-04-03
10
2,753 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 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
need help with share buttons 11 72
Html split(text) Part2 6 23
AJAx/JQuery/JSON Error 3 14
How do I split a variable to newline 2 20
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

726 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