停止 html 表单提交

Question

嗨，我有一个 HTML 表单，我有一个 onclick 事件，它会提示用户，例如如果确定是/否。如果选择否，则它假设停止提交表单，但它似乎正在处理，因为对话框被称为异步。我正在使用 jquery 插件 http://marcosesperon.es/apps/messi/ 来显示我的提示。

下面是我的代码的 sn-p：

    <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();

使用它来防止默认行为。

More info

Answer 4

我会将提交按钮更改为普通按钮（将type="submit" 更改为type="button"）。然后，在按钮触发的函数中，如果您评估用户已按下“是”，则使用 jQuery 提交表单：

('#yourFormID').submit();

否则只需return false。

编辑：我注意到您已经使用 jQuery 触发了submit()，因此该按钮不需要是submit 类型。如果您只是将按钮 type 更改为 button 而不是 submit 并添加 return false 以防您不想提交任何内容，会发生什么情况？这不是你在问题中的意思吗？