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

Question

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

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 () { } 的东西，因为我不希望在用户手动提交表单时更改输入的值。

Answer 1

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

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

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

Form submit programmatically does not invoke inner function

javascript

forms

jquery

submit

form-submit