Javascript 停止html表单提交

您好，我有一个HTML表单，我有一个onclick事件，它会提示用户，例如，如果选择“确定是/否”。如果选择“否”，它会停止表单提交，但由于对话框被称为“异步”，它似乎会处理完。我正在使用jquery插件来显示我的提示

下面是我的代码片段：

    <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');
    }

var命令={
保存：{值：0，名称：“保存”，时态：“保存”}，
电子邮件：{value:1，名称：“EMAIL”，时态：“emailed”}，
SUBMIT:{value:2，名称：“SUBMIT”，时态：“submited”}，
};
函数processCommand（命令）{
if（command==command.EMAIL）{
}
else if（command==command.SAVE）{
$（'#Submit'）.val（command.name）；
$（“#检查表单”）.submit（）；
}
else if（command==command.SUBMIT）{
$（'#Submit'）.val（command.name）；
var photosAttached='@Model.Survey.SitePhotoes.Count（）；
log（'processCommand:submit-begin'）；
如果（附件>=1）{
log（'processCommand:submit photos attached'）；
返回true；
}否则{
log（'processCommand:prompt-mesi'）；
new Mesi（'您确定要提交，因为当前未附上任何检查照片？'{
标题：command.name+“检查”，
按钮：[{id:0，标签：'Yes'，val:'Y'，btnClass:'btn success'}，
{id:1，标签：'No'，val:'N'，btnClass:'btn danger'}，
莫代尔：是的，
回调：函数（val）{
如果（val='Y'）{
log（'processCommand:yes'）；
返回true；
}
否则{
log（'processCommand:no.）；
返回false；
}
}
});
}
log（'processCommand:submit-end'）；
}

}

我使用的是ASP.NETMVC4，我对web开发相当陌生，请原谅我的无知。非常感谢您的帮助

---

Vince.

您通过阻止

submit

事件的默认操作来停止表单提交<代码>单击事件不太合适，因为表单也可以使用键盘提交

在jQuery中，它是：

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

由于您的提示是异步的，所以当用户按“是”时，您总是必须停止正常提交并使用

form.submit（）

强制提交

使用它来防止默认行为

---

对话框正在异步运行，无法防止这种情况发生。但您可以做的是确保在单击按钮时不提交表单，而是在适当的情况下从回调中提交表单：

Html:

---

我会将提交按钮更改为普通按钮（将

type=“submit”

更改为

type=“button”

）。然后，在按钮触发的功能中，如果您评估用户已按下“是”，请使用jQuery提交表单：

（'yourFormID'）。提交（）

否则只需
返回false

编辑：我注意到您已经使用jQuery触发了
submit（）
，因此按钮不需要是
submit
类型。如果您只是将按钮
类型
更改为
按钮
，而不是
提交
，并添加一个
返回false
，以防您不想提交任何内容，会发生什么情况？这不正是你在问题中的意思吗？
谢谢你的回答，所以在我的例子中，我有两个函数？一个是您的函数，例如$（'form'）。在（'submit'，function（）{return false；}）上，然后在我的原始函数中，如果用户回答是，我会将form.submit放在其中。如果您总是阻止默认操作，并在需要时通过jQuery触发它，为什么要让该按钮成为提交按钮？按照我在回答中的建议，将其更改为普通按钮（而不是提交按钮），这样您就不必阻止任何内容。谢谢您的回复。我是一个新手，所以在学习javascript的过程中对javascript不太了解。@Iljaas@vinceanon如果使用常规按钮，则只需单击该按钮（鼠标、显式键盘选项卡）即可激活提示，但使用Enter键（或任何其他机制，如密码管理器）提交表单将绕过处理程序。因此，唯一可靠的方法是使用
onsubmit
和submit按钮。感谢您的响应，在我当前的代码中，我没有将事件传递给我的函数。我是否只是将其放在函数的开头，然后在用户单击“是”时提交表单？感谢您的回复，我输入了您的更改，现在我得到以下错误：函数语句需要名称。你知道问题是什么吗？很抱歉，我在html行中遗漏了一些括号。请现在就试试。谢谢你的帮助。谢谢。我还必须添加event.preventDefault（）；是的，你的权利，这会纠正它。我对javascript等相当陌生，所以我会边学边学。感谢大家的帮助，每个人提供的信息都非常有助于了解发生了什么以及事情是如何发展的。
event.preventDefault();

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

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');
    }