在 Django 中通过 Javascript 提交之前将数据添加到表单答案

【问题标题】：Adding data to form before it submits via Javascript in Django在 Django 中通过 Javascript 提交之前将数据添加到表单
【发布时间】：2022-01-05 06:37:48
【问题描述】：

我正在 Django 中开发一个应用程序，用户在其中输入他们的地址并以表单的形式提交。我需要将此表单数据及其相应的纬度/经度获取到视图中并将其保存在模型中。因此，我在表单提交之前使用 Javascript 调用 lat/long API，然后将该数据添加到表单中，以便将所有数据（地址和 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>

因此，我尝试添加从外部 API 检索到的 lat 和 long 作为已创建隐藏输入的值。然后，我想提交表单，以便它包含我需要的所有数据。

但是，当我提交表单时，POST 数据如下所示： POST Data。这些值只是显示为空字符串。

我已经在控制台中记录了更新的表单，并且经纬度数据确实被添加到了输入字段的值中。它只是没有通过 POST 提交。

谁能帮我解决这个问题？非常感谢！

【问题讨论】：

submit() 调用需要在 fetch 回调中

标签： javascript html django forms

【解决方案1】：

根据评论但未经测试。一旦所有其他处理完成后，提交表单的实际调用应该在回调中，因为根据异步操作的本质，响应可能会在调用函数完成后的某个时间出现。

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();
            });
    }
}

【讨论】：