How to re-trigger a form submit event in jQuery UI dialog callback

I'm trying to use a jQuery UI Dialog for a sort of "soft" validation--if the form looks suspicious, warn the user, but allow them to continue the submission anyway:

// multiple submit buttons...
var whichButton;
$("#myForm").find("[type=submit]").click(function()
{
  whichButton = this;
}

var userOkWithIt = false;
$("#myForm").submit(function()
{
  if (dataLooksFishy() && !userOkWithIt)
  {
    $("Are you sure you want to do this?").dialog(
    {
      buttons:
      {
        "Yes": function()
        {
          $(this).dialog("close");

          // override check and resubmit form
          userOkWithIt = true;
          // save submit action on form
          $("#myForm").append("<input type='hidden' name='" +
            $(whichSubmit).attr("name") + "' value='" +
            $(whichSubmit).val() + "'>");
          $("#myForm").submit(); /******  Problem *********/
      开发者_开发问答  },
        "No": function() { $(this).dialog("close"); }
      }
    });
    return false; // always prevent form submission here
  } // end data looks fishy

  return true; // allow form submission 
});

I've checked this out with a bunch of debugging alert statements. The control flow is exactly what I expect. If I first fail dataLooksFishy(), I am presented with the dialog and the method returns false asynchronously.

Clicking "yes" does re-trigger this method, and this time, the method returns true, however, the form does not actually submit...

I'm sure I'm missing a better methodology here, but the main target is to be able to simulate the behavior of the synchronous confirm() with the asynchronous dialog().

If I understand your problem correctly - here's the solution. (I've separated actions into separate functions (easier to manage)):

1. submitting the form (normally) would check if there are errors - dataLooksFishy()
2. if there are errors - a dialog should pop-up

3. if user clicks "yes" - form will be submitted with "force=true"

   var
   form = $("#myForm"),
   
   formSubmit = function(force){
       if (dataLooksFishy() && force !== true) return showWarning();   // show warning and prevent submit
       else return true;                                               // allow submit
   },
   
   showWarning = function(){
       $("Are you sure you want to do this?").dialog({ buttons: {
           "Yes": function(){ $(this).dialog("close"); formSubmit(true); },
           "No": function() { $(this).dialog("close"); }
       }});
       return false;
   },
   dataLooksFishy = function(){ 
       return true;     // true when there are validation errors
   };
   
   // plain JS form submitting (also works if you hit enter in a text field in a form)
   form[0].onsubmit = formSubmit;
   

I couldn't test it with your form as you have not posted it here. If you have problems with this solution, please post more of your code here and I'll try to help.