在视图中存在多个按钮时阻止表单提交

Question

视图有多个按钮

<div class="row">
<div class="col-md-3">
    @if(Model.Q>1)
    {
        @Html.ActionLink("Previous","Perform","Test",new{q=Model.Q-1},new{@class="btn btn-success",id="test-previous-btn"})
    }
    <input type="submit" value="Next" class="btn btn btn-success" id="test-next-btn" />
</div>
<div class="col-md-3">
    <input type="button" data-confirm="Are you sure that you want to submit?" value="Submit" class="btn btn btn-primary" id="test-submit-btn" />
    <input type="button" value="Cancel" class="btn btn-danger" id="test-cancel-btn" />
</div>

我想要用户确认提交按钮，所以我使用以下javascript函数

$('#test-submit-btn').click(function(event){
    var result=confirm("Are you sure! You want to submit?");
    if(!result)
    {
        event.preventDefault();
        return false;
    }

});

无论用户的响应是什么，它都不会阻止提交。但是，如果我删除其他按钮，它按预期运行。

请你的解决方案！

Answer 1

e在您的点击事件功能中不存在。您需要将其更改为

event.preventDefault();

修改 胡子骆驼是正确的。您需要在click事件开始时阻止默认操作，否则它将提交表单。你需要做这样的事情：

$('#test-submit-btn').click(function(event){
    event.preventDefault();
    var result=confirm("Are you sure! You want to submit?");
    if(result)
    {
        // this is assuming that the first form found is the one
        // you want to submit, otherwise you will need to use the 
        // selector for the form: $("#my-form").submit();
        $(this).parents("form").submit();
    }
});