Jquery表单提交只需一秒点击答案

【问题标题】：Jquery form submitting only one second clickJquery表单提交只需一秒点击
【发布时间】：2017-05-09 08:49:00
【问题描述】：

我在 .NET MVC 中有一个可以由多个按钮提交的表单。每个按钮将 eventCommand 隐藏字段设置为特定值，然后像这样提交表单：

$(document).ready(function(){
    $("[data-crm-action]").on("click", function (e) {
        e.preventDefault();
        $("#EventCommand").val($(this).data("crm-action"));
        $("form").submit();
    });
});

但是，我需要在按钮上单击两次才能看到提交的表单。为什么第一次点击不提交？第一次单击时，光标将返回到搜索字段的文本框。电子邮件字段在模型中用注释标记为必需，但我尝试将 formnovalidate 添加到我的按钮，它仍然可以。

这是视图中的一些代码：

@using (Html.BeginForm())
{
@Html.HiddenFor(m => m.EventCommand)
@Html.HiddenFor(m => m.IsValid)
@Html.HiddenFor(m => m.Mode)

<!-- BEGIN SEARCH AREA -->
if (Model.IsSearchAreaVisible)
{
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title">Search for Users</h1>
        </div>
        <div class="panel-body">
            <div class="form-group">
                @Html.LabelFor(m => m.SearchEntity.Email):
                @Html.TextBoxFor(m => m.SearchEntity.Email, new { @class = "form-control" })
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSearch" class="btn btn-sm btn-primary" data-crm-action="search">
                <i class="glyphicon glyphicon-search"></i>&nbsp;Search
            </button>
            <button id="btnReset" class="btn btn-sm btn-primary" data-crm-action="resetsearch">
                <i class="glyphicon glyphicon-share-alt"></i>&nbsp;Reset
            </button>
            <button id="btnAdd" class="btn btn-sm btn-success" data-crm-action="add">
                <i class="glyphicon glyphicon-plus"></i>&nbsp;Add
            </button>
        </div>
    </div>
}
<!-- END SEARCH AREA -->

<!-- BEGIN DETAIL AREA -->
if (Model.IsDetailAreaVisible)
{
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title">User Information</h1>
        </div>
        <div class="panel-body">
            <!-- BEGIN MESSAGE AREA -->
            <div class="row">
                <div class="col-sm-12">
                    @if (!Model.IsValid)
                    {
                        <div class="alert alert-danger alert-dismissable" role="alert">
                            <button type="button" class="close" data-dissmiss="alert">
                                <span aria-hidden="true">
                                    &times;
                                </span>
                                <span class="sr-only">Close</span>
                            </button>
                            @Html.ValidationSummary(false)
                        </div>
                    }
                </div>
            </div>
            <!-- END MESSAGE AREA -->
            <div class="form-group">
                @Html.LabelFor(m => m.Entity.FirstName)
                @Html.TextBoxFor(m => m.Entity.FirstName, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.LastName)
                @Html.TextBoxFor(m => m.Entity.LastName, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Title)
                @Html.TextBoxFor(m => m.Entity.Title, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Email)
                @Html.TextBoxFor(m => m.Entity.Email, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Phone)
                @Html.TextBoxFor(m => m.Entity.Phone, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.PhoneExtension)
                @Html.TextBoxFor(m => m.Entity.PhoneExtension, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.IsActive)
                @Html.EditorFor(m => m.Entity.IsActive)
                @Html.LabelFor(m => m.Entity.AccessLevelID)
                @Html.TextBoxFor(m => m.Entity.AccessLevelID, new { @class = "form-control" })
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSave" class="btn btn-sm btn-primary" data-crm-action="save" formnovalidate="formnovalidate">
                <i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Save
            </button>
            <button id="btnCancelAdd" class="btn btn-sm btn-primary" data-crm-action="cancelAdd" formnovalidate="formnovalidate">
                <i class="glyphicon glyphicon-remove-sign"></i>&nbsp;Cancel
            </button>
        </div>
    </div>
}

【问题讨论】：

这段代码在我看来完全没问题。
它可能来自应用程序中的另一个设置吗？
可能是。您在问题中仅发布了您的应用程序中的一些代码。所以我们不知道问题出在哪里。
如果有帮助，我会从视图中添加更多代码

标签： jquery asp.net-mvc forms

【解决方案1】：

我使用相同的请求管理模式并有两个验证摘要字段（一个在模式窗口中，虽然我不明白为什么没有显示相同的奇怪行为，但它工作得很好）我需要在提交之前禁止验证。

我试过设置，

formnovalidate="formnovalidate"

我希望禁止验证的按钮的标签，这仅适用于此处提到的烦人的副作用。

对我有用的是，在 js 方面将 e.preventdefault 设置为仅用于我想要验证的请求的选项，如下所示：

command = $(this).data("gtb-action");
if (command === "PostNoteEntity") {
    e.preventDefault();
}

请尝试一下！

【讨论】：