JavaScript表单提交但未附加所有附加表单字段

Question

我有一个Google地方信息自动完成搜索栏。表格中的帖子数据在Symfony中读取。搜索栏工作正常，但用户必须单击列表中的某个位置，因此我做到了，如果用户点击输入，它将模拟向下箭头并选择第一个建议。

[如果用户点击列表中的某个地方，我将执行jQuery表单。附加以添加经纬度如果用户点击回车，我可以看到在检查元素中发生form.append，但是字段未显示在发布数据中。

下面是处理自动完成和模拟向下箭头的代码

window.autocomplete = null;
    const form = $('#search-form');

    function initAutocomplete() {
        var pac_input = document.getElementById('search-input');

        (function pacSelectFirst(input) {
            // store the original event binding function
            var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

            function addEventListenerWrapper(type, listener) {
                // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
                // and then trigger the original listener.
                if (type === "keydown") {
                    var orig_listener = listener;
                    listener = function (event) {
                        var suggestion_selected = $(".pac-item-selected").length > 0;
                        if (event.which === 13 && !suggestion_selected) {
                            var simulated_downarrow = $.Event("keydown", {
                                keyCode: 40,
                                which: 40
                            });
                            orig_listener.apply(input, [simulated_downarrow]);
                        }
                        orig_listener.apply(input, [event]);
                    };
                }
                _addEventListener.apply(input, [type, listener]);
            }

            input.addEventListener = addEventListenerWrapper;
            input.attachEvent = addEventListenerWrapper;

            // Create the autocomplete object, restricting the search to geographical location types.
            autocomplete = new google.maps.places.Autocomplete(input,
                {types: ['geocode']});

            autocomplete.addListener('place_changed', fillInAddress);

        })(pac_input);
    }

下面是函数fillInAddress，用于添加字段。

function fillInAddress() {
        let place = autocomplete.getPlace();
        console.log(place)
        let lat = place.geometry.location.lat();
        let lng = place.geometry.location.lng();
        let searchplace = place.formatted_address;
        let searchplaceElement = $('#searchplace');
        if (!searchplaceElement.length) {
            form.append("<input id='searchplace' name='searchplace' type='hidden' value='" + searchplace + "'>")
            form.append("<input id='lat' name='lat' type='hidden' value='" + lat + "'>")
            form.append("<input id='lng' name='lng' type='hidden' value='" + lng + "'>")
        } else {
            searchplaceElement.val(searchplace);
            $('#lat').val(lat);
            $('#lng').val(lng);
        }
}

下面是HTML表单的一部分。

        <form action="/restaurants" id="search-form" method="post">
            <div class="input-group input-group-lg">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-map-marker"></i></span>
                </div>
                <input id="search-input" class="form-control shadow-none" type="text" placeholder="Zoeken op adres of postcode">
                <div class="input-group-append">
                    <button type="submit" class="btn btn-dark">Zoeken</button>
                </div>
            </div>
        </form>

我必须补充一点，在jQuery或Javascript上我不是真正的好导出。

Answer 1

标准提交按钮仅提交最初加载的表单字段。在DOM加载后添加的字段必须手动提交，例如：

$('#search-form).on('submit', function(e) {
    e.preventDefault();
    $.post($(this).attr('action'), $(this).serialize());
});