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;
},

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

1 个答案: