Question

嗨我有HTML表单，我有一个onclick事件，它提示用户例如如果确定是/否。如果选择no，则假设停止提交表单，但是当对话框被称为async时，它似乎会处理完毕。我正在使用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，而且我对网络开发还很陌生，所以请原谅我的无知。非常感谢任何帮助。

文斯。

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以防您不想提交任何内容，会发生什么情况？这不是你在问题中的意思吗？

停止html表单提交

4 个答案: