停止html表單提交

Question

嗨，我有HTML表單，我有一個onclick事件，它會提示用戶，例如確定是/否。 如果選擇否，則它應該阻止表單提交，但是似乎在對話框被稱為異步時一直在處理。 我正在使用一個jquery插件http://marcosesperon.es/apps/messi/來顯示我的提示。

以下是我的代碼片段：

    <div id="buttonCommnads">
        <button type="submit" class="k-button cancel" id="save" value="Save" title="Save inspection so it may be submitted at a later time" onclick="processCommand(COMMAND.SAVE);">Save</button>
        <button type="submit" class="k-button" id="Submit" value="Submit" title="Submit inspection" onclick="return processCommand(COMMAND.SUBMIT);">Submit</button>
        @*<button type="submit" class="k-button" id="email" title="Generate draft email for inspection photos" onclick="processCommand(COMMAND.EMAIL);">Email</button>*@
        <button type="button" class="k-button" id="cancel" title="Discard changes" onclick="location.href='@Url.Action("Index", "Inspections")'">Cancel</button>
    </div>

然后是javascript函數：

<script>

var COMMAND = {
    SAVE: { value: 0, name: "Save", tense: "saved" },
    EMAIL: { value: 1, name: "Email", tense: "emailed" },
    SUBMIT: { value: 2, name: "Submit", tense: "submitted" },
};

function processCommand(command) {
    if (command == COMMAND.EMAIL) {

    }
    else if (command == COMMAND.SAVE) {
        $('#Submit').val(command.name);
        $('#inspectionForm').submit();
    }
    else if (command == COMMAND.SUBMIT) {
        $('#Submit').val(command.name);
        var photosAttached = '@Model.Survey.SitePhotoes.Count()';
        console.log('processCommand: submit - begin');
        if (photosAttached >= 1) {
            console.log('processCommand: submit photos attached.');
            return true;
        } else {
            console.log('processCommand: prompt messi.');
            new Messi('Are you sure you wish to submit as no inspections photos are currently attached?', {
                title: command.name + ' Inspection',
                buttons: [{ id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success' },
                            { id: 1, label: 'No', val: 'N', btnClass: 'btn-danger' }],
                modal: true,
                callback: function (val) {
                    if (val == 'Y') {
                        console.log('processCommand: yes.');
                        return true;
                    }
                    else {
                        console.log('processCommand: no.');
                        return false;
                    }
                }
            });
        }
        console.log('processCommand: submit - end');
    }

}

我正在使用ASP.NET MVC 4，並且對Web開發還很陌生，所以請原諒我的無知。 任何幫助，不勝感激。

文斯。

Answer 1

對話框是異步進行的，因此無法阻止它。 但是您可以做的是確保單擊按鈕后不提交表單，而是在適當的情況下從回調內提交表單：

HTML：

<button type="submit" class="k-button" id="email" title="Generate draft email for inspection photos" onclick="(function() {processCommand(COMMAND.EMAIL);return false;})()">Email</button>

Javascript：

function processCommand(command) {
    if (command == COMMAND.EMAIL) {

    }
    else if (command == COMMAND.SAVE) {
        $('#Submit').val(command.name);
        $('#inspectionForm').submit();
    }
    else if (command == COMMAND.SUBMIT) {
        $('#Submit').val(command.name);
        var photosAttached = '@Model.Survey.SitePhotoes.Count()';
        console.log('processCommand: submit - begin');
        if (photosAttached >= 1) {
            console.log('processCommand: submit photos attached.');
            return true;
        } else {
            console.log('processCommand: prompt messi.');
            new Messi('Are you sure you wish to submit as no inspections photos are currently attached?', {
                title: command.name + ' Inspection',
                buttons: [{ id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success' },
                            { id: 1, label: 'No', val: 'N', btnClass: 'btn-danger' }],
                modal: true,
                callback: function (val) {
                    if (val == 'Y') {
                        console.log('processCommand: yes.');
                        $("form:first").submit();
                    }
                    else {
                        console.log('processCommand: no.');
                    }
                }
            });
        }
        console.log('processCommand: submit - end');
    }

Answer 2

通過阻止submit事件的默認操作來停止表單提交。 click事件不太合適，因為也可以使用鍵盤提交表單。

在jQuery中，它是：

$('form').on('submit', function(){
    return false;
})

由於提示是異步的，因此您始終必須停止正常提交，並在用戶按下“是”時使用form.submit()強制提交。

Answer 3

event.preventDefault();

用它來防止默認行為。

更多信息

Answer 4

我將提交按鈕更改為普通按鈕（將type="submit"更改為type="button" ）。 然后，在按鈕觸發的函數中，如果您評估用戶已按下“是”，則使用jQuery提交表單：

('#yourFormID').submit();

否則， return false 。

編輯：我注意到您已經使用jQuery觸發了submit() ，因此按鈕不必是submit類型。 如果僅將按鈕type更改為button而不是submit並在不想提交任何內容的情況下添加return false發生什么？ 這不是您的意思嗎？