Javascript 表单提交但不包含所有附加的表单字段

Question

我有一个 Google 地方自动完成搜索栏。表单中的帖子数据在 Symfony 中读取。搜索栏可以正常工作，但用户必须点击列表中的某个位置，所以我做了这样的设置，如果用户点击 Enter，它会模拟一个向下箭头并选择第一个建议。

如果用户单击列表中的某个位置，我会执行 jQuery form.append 来添加 lat/lng 如果用户点击回车，我可以看到 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());
});