Question

我正在使用Django和Google maps API来对地址进行地理编码，并将结果返回到一个表单，然后该表单将被发送到另一个视图。

当我将地址添加到表单输入（form.user_entered_address）并单击“提交”时，我会从此警报中获得正确的响应：

alert("latitude:" + result.lat());

但我似乎无法将数据粘贴到表单上。我尝试了以下内容来查看数据是否附加到表单：

alert($('#longitude').val());
alert($('#id_longitude').val());

但他们都说未定义。此外，表单的操作无效（即，它不会重定向到带有表单数据的“测试”视图，它只会保留在index.html页面上。

我一直在尝试调试这个问题一个星期稳定而且没有想法。任何的意见都将会有帮助。

谢谢，

伊万

的index.html

<html>

<head lang="en">
<meta charset="UTF-8">
<title>Testing out ATM form</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var geocoder = new google.maps.Geocoder();

$('#search_form').submit(function(e) {

    e.preventDefault();

    var onSuccess = function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            result = results[0].geometry.location;
            $('this').prepend('<input type = "hidden" id="latitude" value"' + result.lat() + '">');
            $('this').prepend('<input type = "hidden" id="longitude" value"' + result.lng() + '">');
            $('this').prepend('<input type = "hidden" id="formatted_address" value"' + result.formatted_address + '">');

            alert("latitude:" + result.lat());

            alert($('#longitude').val());


        } else {
            alert('Geocode was not successful for the following reason' + status);
        }
        $('this').trigger('submit');
    }
    geocoder.geocode({
        'address': search_form.user_entered_address.value
                    }, onSuccess);
    });
});


</script>

<form action="{% url 'testingx' %}" id="search_form"  method="POST">
    {% csrf_token %}
    {{ form.user_entered_address }}

    <input type="submit" id="submit">

</form>



</body>
</html>

FORMS.py

来自django导入表格

class SearchForm(forms.Form):
    user_entered_address = forms.CharField(required=False, max_length=255)
    full_address = forms.CharField(max_length=255, required=False, widget=forms.HiddenInput())
    latitude = forms.CharField(required=False, widget=forms.HiddenInput())
    longitude = forms.CharField(required=False, widget=forms.HiddenInput())

Answer 1

您的Javascript代码中似乎有拼写错误。您在前置调用中缺少值旁边的=符号。

此外，您的元素需要一个与django表单字段名称匹配的name属性才能使其正常工作。像

这样的东西

$('this').prepend('<input type = "hidden" id="latitude" name="latitude" value="' + result.lat() + '">');
$('this').prepend('<input type = "hidden" id="longitude" name="longitude" value="' + result.lng() + '">');
$('this').prepend('<input type = "hidden" id="formatted_address" name="formatted_address" value="' + result.formatted_address + '">');

更简单（也许更干净的方式）可能是在django表单中输出隐藏字段，然后只在现有字段中设置值。

在您的模板中，您可以添加

 {{ form.latitude }}
 {{ form.longitude }}
 {{ form.formatted_address }}

然后在Javascript中你应该可以$('#id_latitude').val(result.lat());

无法将Google地理编码数据移动到Django表单

1 个答案: