以编程方式提交表单不会调用内部函数答案

【问题标题】：Form submit programmatically does not invoke inner function以编程方式提交表单不会调用内部函数
【发布时间】：2016-06-02 12:53:15
【问题描述】：

我有以下自动完成功能。单击建议值之一时，表单会自动提交：

var submitAutocompleteForm = function (event, ui) {    
    var $input = $(this);
    $input.val(ui.item.value);    
    var $form = $input.parents("form:first");    
    $form.submit();
};

var createAutoComplete = function () {    
    var $input = $(this);    
    var options = {
        source: $input.attr("data-source-autocomplete"),
        select: submitAutocompleteForm,
    };    
    $input.autocomplete(options);
};
$("input[data-source-autocomplete]").each(createAutoComplete);

这很好用。表单有这个额外的隐藏输入：

<input id="autocomplete" name="autocomplete" type="hidden" value="False" />

现在，我想更改 submitAutocompleteForm 函数，以便在提交时将此输入的值更改为 true：

$form.submit(function (e) {
    $(this).children('#autocomplete').val(true);
});

但是这个内部函数永远不会被调用。即使尝试在内部使用简单的alert，它也永远不会被调用。

我做错了什么？

编辑： html代码：

@using (Ajax.BeginForm("LoadBook", new { id = Model.CollectionId }, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "bookDetailsPlaceHolder",
    OnComplete = "animateBookLoad"
}))
{
    @Html.Hidden("autocomplete", false)

    <div class="form-horizontal">
        <div class="form-group form-custom">
            <div class="col-md-12">
                @Html.TextBox("bookDetails", null, new { @class = "form-control pull-left", @placeholder = "Szukaj tytułu", data_source_autocomplete = Url.Action("Autocomplete") })
                <span class="input-group-btn">
                    <button id="addCopySearchBtn" class="btn btn-default" type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </div>
    </div>
}

<div id="bookDetailsPlaceHolder" style="display:none">
</div>

另外，我注意到当我手动点击submit 按钮时，内部函数被调用......所以在我看来$form.submit() 提交了表单（显然）但$form.submit(function () { } 实际上被调用时表单正在提交。

我将尝试指定我需要的内容：我需要 submitAutocompleteForm 函数来提交 TextBox 中的值，还需要更改隐藏输入的值。我不能写像$('#form").on('submit', function () { } 这样的东西，因为我不想在用户手动提交表单时更改输入的值。

【问题讨论】：

您在代码中的哪个位置添加了$form.submit(fn) 事件处理程序？
我不想添加它，我只想改变最初的$form.submit()，所以输入的值也改变了。
请出示您的html代码
$form 是否与您提交的表单相同？
您的控制台是否有任何错误？我认为你的变量$form 没有定义。

标签： javascript jquery forms submit form-submit

【解决方案1】：

$form.submit(function (e) {
    e.preventDefault();
    $(this).children('#autocomplete').val(true);
});

这会阻止表单发送，这意味着下面的函数将能够操作表单元素。 但这意味着您必须通过 JavaScript 对表单数据进行 AJAX 处理或再次提交表单。

【讨论】：

... "AJAX the form data via JavaScript" ... 或者调用表单的submit方法。