Добавление данных в форму до ее отправки с помощью Javascript в Django

Я работаю над приложением на Django, в котором пользователь вводит свой адрес и отправляет его в форме. Мне нужно получить данные формы, вместе с соответствующими широтой/длиной, в представлениях и сохранить их в модели. Поэтому я использовал Javascript для вызова API lat/long перед отправкой формы, а затем добавил эти данные в форму, чтобы все данные (адрес и lat/long) были отправлены на сервер. Однако эти новые данные, вставленные Javascript, не отображаются вместе с остальными данными POST при отправке. Я не уверен, почему так происходит.

Вот код JS:

const initiate_ride_form = document.querySelector("#initiate-ride-form");
    if (initiate_ride_form != null) {
        
        document.querySelector("#start-ride-button").onclick = () => {
            
            // these are just predecided addresses to simplify the code and isolate this problem
            const origin = '20%20W%2034th%20St%2C%20New%20York%2C%20NY%2010001'
            const destination = '1600%20Pennsylvania%Avenue%20NW%2C%20Washington%2C%20DC%2020500';
            
            fetch(`https://api.opencagedata.com/geocode/v1/json?q=${origin}&key=b45938af46624365b08b989268e79d5e`)
            // Put response into json form
            .then(response => response.json())
            .then(data => {
                
                // get the lat and long and save them in variables
                console.log(data.results[0].geometry);
                const longitude_origin = data.results[0].geometry.lng;
                const latitude_origin = data.results[0].geometry.lat;
                
                // add the make the hidden input's value equal to the long
                var input_long_origin = document.querySelector("#from_long");
                input_long_origin.value = longitude_origin;
                
                // add the make the hidden input's value equal to the lat
                var input_lat_origin = document.querySelector("#from_lat");
                input_lat_origin.value = latitude_origin;
            });

            // submit form, ideally with the newly inserted data
            initiate_ride_form.submit();
        }
        
    }

Вот моя HTML форма:

<form method="post" id="initiate-ride-form" action="{% url 'initiate_ride' %}">
        {% csrf_token %}
        {{ form }}
        <input type="hidden" name="from_lat" id="from_lat"/>
        <input type="hidden" name="from_long" id="from_long"/>
</form>

Итак, я попытался добавить lat и long, которые я извлек из внешнего API, в качестве значения уже созданного скрытого ввода. Затем я хотел отправить форму, чтобы она содержала все необходимые мне данные.

Однако, когда я отправляю форму, данные POST выглядят следующим образом: POST Data. Значения просто отображаются как пустые строки.

Я зарегистрировал обновленную форму в консоли, и данные lat long действительно добавляются к значениям поля ввода. Просто они не отправляются через POST.

Может ли кто-нибудь помочь мне с этой проблемой? Большое спасибо!

Согласно комментарию, но не проверено. Фактический вызов для отправки формы должен быть внутри обратного вызова после того, как вся остальная обработка будет выполнена, так как по самой природе асинхронных операций ответ может прийти через некоторое время после завершения вызывающей функции.

const initiate_ride_form = document.querySelector("#initiate-ride-form");
if( initiate_ride_form != null ) {
    
    document.querySelector("#start-ride-button").onclick = () => {
        
        const origin = '20%20W%2034th%20St%2C%20New%20York%2C%20NY%2010001'
        const destination = '1600%20Pennsylvania%Avenue%20NW%2C%20Washington%2C%20DC%2020500';
        
        fetch( `https://api.opencagedata.com/geocode/v1/json?q=${origin}&key=b45938af46624365b08b989268e79d5e` )
            .then(r => r.json())
            .then(data => {
                document.querySelector("#from_long").value = data.results[0].geometry.lng;
                document.querySelector("#from_lat").value = data.results[0].geometry.lat;

                // MOVE the submit() call here within the callback
                initiate_ride_form.submit();
            });
    }
}
Вернуться на верх