Javascript форма отправляется, но не со всеми добавленными полями формы - PullRequest
Новая
       11

Javascript форма отправляется, но не со всеми добавленными полями формы

0 голосов
/ 30 апреля 2020

У меня есть панель поиска автозаполнения в Google. Данные поста из формы читаются в Symfony. Панель поиска работает нормально, но пользователь должен щелкнуть место в списке, поэтому я сделал так, чтобы, если пользователь нажимает клавишу ввода, он имитировал стрелку вниз и выбирал первое предложение.

Если пользователь щелкаю по месту в списке. Я делаю jQuery form.append, чтобы добавить лат / лнг. Если пользователь нажимает клавишу ввода, я вижу, что 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.

1 Ответ

0 голосов
/ 30 апреля 2020

Стандартная кнопка отправки отправляет только те поля формы, которые были изначально загружены. Поля, которые были добавлены после загрузки DOM, должны быть отправлены вручную, например, так: 

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