JQuery on submit confirmation, with modal dialog at the end?

Question

I have a form at the moment when I would like to check, and if everything is correct, I would like it to open a dialog box confirming their details, here is an example of the code that I still have:

var userConfirmed = false; $("#dialog").dialog({ buttons: { "Yes": function() { userConfirmed = true; $("#inputform").submit(); }, "No, I'll change them.": function() { $(this).dialog("close"); } } }); // check they've submitted what they need to $("form").submit(function() { // lots of these if (something) { return false; } $("#dialog").dialog("open"); return userConfirmed; }); 

The initial check works fine - it checks the criteria and flags as appropriate, and if none of these criteria is met, it will display the modal field the way I want. So far so good.

The problem is, however, when I click yes to submit the form, it does not submit until you click the submit button again, argh! Any call to post a forum using jQuery fails.

Any suggestions would be greatly appreciated, thanks.

Answer 1

Add a flag somewhere, indicating whether a dialog box appears, and the user clicks yes. Example:

 var userConfirmed = false; $("form").submit(function(e) { if ( userConfirmed ) { userConfirmed = false; // Reset it to false return true; // No need to validate anything, that was already done last time } var form = $(this); // ... "Yes": function() { userConfirmed = true; // Confirm that the dialog was shown and the user clicked "Yes" $(this).dialog("close"); form.submit(); // Try again; this time, the validation was already done }, // ... return false; // Don't submit; the user haven't confirmed the info on the dialog }); 

Without this flag, you will be in a situation with a chicken and an egg: submit opens a dialog, and a dialog that calls $("form").submit() opens a dialog again ...

If you have many forms and you do not want to use the "global" var, you can use data for the same purpose.

Update live jsFiddle example. Successfully tested in Chrome and Firefox (it displays a blank page 3 seconds after sending).

Answer 2

The fact that the dialog opens does not stop code execution. valToReturn returns $("form").submit() before installing it.

You can do something like this:

 //Save the default behavior to break any loops var defaultSubmit = $.extend(true, {}, $("form").submit); $("form").submit(function(e) { var valToReturn = true; // lots of these if (something) { return false; } // popup the dialog confirmation $("#dialog").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); defaultSubmit(); // User confirmed, submit form. }, "Cancel": function() { $(this).dialog("close"); // Form already prevented from submitting. Exit quietly. } } }); $("#dialog").dialog("open"); return false; // Prevent form from being submitted }); 

Answer 3

as always, I recommend using jQuery validate for validation, then the code will look like this:

 $("#formid").validate({ submitHandler: function(form) { $("#dialog").dialog({ buttons: { "Ok": function() { form.submit(); $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); } }); 

Live demo

Answer 4

I would attach the event to the button instead of the form. Just attach it to the click of the submit button. You can then use event.preventDefault() so that the form does not submit until the dialog is validated. In the Yes function, just put $('form').submit() . No need to worry about the return value either.