如何在jQuery模式确认对话框之后提交表单


How to submit a form after jQuery modal confirmation dialog?

此脚本在提交表单之前打开一个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

在对话框的提交函数中,尝试:

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