如何在jQuery模态确认对话框后提交表单？

Question

这个脚本在提交表单之前打开一个jQuery对话框/模式来请求验证，但是当用户点击模式窗口中的“提交”按钮时，什么都不会发生。 Firebug揭示了这个问题与包含“document.leaveReq.submit（）;”的行有关。 我是jQuery和javascript的新手，并且一直在为这几天苦苦挣扎。任何帮助在这里非常感谢。

$(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

在对话框试试你提交功能：

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