Comment soumettre un formulaire après la boîte de dialogue de confirmation modale jQuery?

Question

Ce script ouvre une boîte de dialogue jQuery/modal pour demander une vérification avant de soumettre le formulaire, mais lorsque l'utilisateur clique sur le bouton "Soumettre" dans la fenêtre modale, rien ne se passe. Firebug révèle que le problème est avec la ligne contenant "document.leaveReq.submit();" Je suis assez nouveau pour jQuery et javascript, et j'ai eu du mal avec celui-ci pendant quelques jours. Toute aide ici est très appréciée.

$(document).ready(function() { 

    // jQuery UI Dialog  
    $('#dialog').dialog({ 
     autoOpen: false, 
     width: 400, 
     modal: true, 
     resizable: false, 
     buttons: { 
      "Submit": function() { 
       document.leaveReq.submit(); 
       return true; 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
       return false; 
      } 
     } 
    }); 
    $('#formerror').dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     buttons: { 
      "Back": function() { 
       $(this).dialog("close"); 
       return false; 
      } 
     } 
    }); 

    $('#verify').click(function(e){ 
     e.preventDefault(); 
     if(!$("input#from").val() || !$("input#to").val()){ 
      $("span#error-message").html('Provide a starting and ending date.'); 
      $('#formerror').dialog('open'); 
     } else if($("input#amount").val() == 0){ 
      $('#formerror').dialog('open'); 
      $("span#error-message").html('Provide the number of units that you will use.'); 
     } else if(!$("textarea#description").val()){ 
      $("span#error-message").html('Provide the reason for this leave request.'); 
      $('#formerror').dialog('open'); 
     } else { 
       $("span#leavedescriptionidentification").html(document.getElementById('leave_description_identification').options[document.getElementById('leave_description_identification').selectedIndex].value); 
      $("span#startingdate").html($("input#from").val()); 
      $("span#endingdate").html($("input#to").val()); 
      $("span#amount").html($("input#amount").val()); 
      $("span#description").html($("textarea#description").val()); 
      $('#dialog').dialog('open'); 
     } 
     return false; 
    }); 
}); 
</script> 
<form action="/leave/lvereq" method="post" id="leaveReq" name="leaveReq" accept-charset="utf-8"> 
<div id="add"> 
    <table> 
     <tr> 
      <td class="label"><label for="leave_description_identification">Leave Type:</label></td> 
      <td class="ret_text"><select id="leave_description_identification" name="leave_description_identification" class="scrolledlist"> 
        <option ...>...</option> 
        </select> 
      </td> 
     </tr> 
     <tr> 
      <td class="label"><label for="starting_date">Start Date:</label></td> 

      <td class="ret_text"><input type="text" id="from" name="starting_date" /></td> 
     </tr> 
     <tr> 
      <td class="label"><label for="ending_date">Ending Date:</label></td> 
      <td class="ret_text"><input type="text" id="to" name="ending_date" /></td> 
     </tr> 
     <tr> 
      <td class="label"><label for="amount">Number of Units:</label></td> 

      <td class="ret_text"><input type="text" id="amount" name="amount" alt="signed_decimal_value_3" class="signed_decimal_value_3" onFocus="getCalc();" /></td> 
     </tr> 
     <tr> 
      <td class="label"><label for="description">Reason For Leave:</label></td> 
      <td class="ret_text"><textarea id="description" name="description" value="200" cols="60" rows="7" class="scrolledtext" wrap="soft"></textarea></td> 

     </tr> 
    </table> 

</div> 

<div class="formButtons"> 
    <span class="formButton"> 
     <a id="verify" name="verify" href="#" class="ui-state-default ui-corner-all" style="padding:3px 8px;">Submit</a> 
     <input type="submit" id="submit" name="submit" value="Submit" /> 
    </span> 
</div> 

</form> 

<div id="dialog" title="Confirmation"> 
    <p> 
     <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Please verify the the information you entered is correct: 
    </p> 
    <p> 
     <span class="label">Type:</span> <span id="leavedescriptionidentification"></span><br /> 
     <span class="label">Dates:</span> <span id="startingdate"></span> - <span id="endingdate"></span><br /> 
     <span class="label">Unit Amount:</span> <span id="amount"></span><br /> 

     <span class="label">Reason:</span> <span id="description"></span> 
    </p> 
    <p>If this is correct, click Submit.</p> 
    <p>To edit, click Cancel.<p> 
</div> 

<div id="formerror" title="Error"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Please correct the following error:</p> 

    <p><span id="error-message"></span></p> 
</div 

Answer 1

Dans votre fonction de soumission sur la tentative de dialogue:

"Submit": function() { 
    $('form#leaveReq').submit(); 
    return true; 
},