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()提交表单（显然）但是{{1}当表单正在提交时，实际上会调用。

我会尝试指明我需要的东西：我需要submitAutocompleteForm函数来提交TextBox中的值，还需要更改隐藏输入的值。我不能写$form.submit(function () { }之类的内容，因为我不想在用户手动提交表单时更改输入的值。

Answer 1

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

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

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

1 个答案: