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

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

javascript jquery ajax django google-maps

Javascript 无法将Google地理编码数据移动到Django表单,javascript,jquery,ajax,django,google-maps,Javascript,Jquery,Ajax,Django,Google Maps,我正在使用Django和GoogleMapsAPI对地址进行地理编码，并将结果返回到一个表单，该表单将被发送到另一个视图当我将地址添加到表单输入表单。用户输入地址并单击提交时，我从该警报中获得正确响应： alert("latitude:" + result.lat()); 但我似乎无法将数据保留在表单上。我尝试了以下操作以查看是否将数据附加到表单： alert($('#longitude').val()); alert($('#id_longitude').val()); 但他们都说没有定

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

当我将地址添加到表单输入表单。用户输入地址并单击提交时，我从该警报中获得正确响应：

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

但我似乎无法将数据保留在表单上。我尝试了以下操作以查看是否将数据附加到表单：

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

但他们都说没有定义。此外，表单的操作不起作用，即它不会重定向到包含表单数据的“testingx”视图，它只会停留在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>

看起来您的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 + '">');

然后在Javascript中，您应该能够执行$'id_latitude'.valresult.lat

嗨，皮埃尔，谢谢你的回复。我将尝试一下，并报告结果和最终结果。再次，您好，您的两个建议都非常有效。我遇到的一个问题是提交表单的最后一步。e、 preventDefault正在做它应该做的事情，停止提交功能，以便地理编码可以完成。但是，$this.triggersubmit；什么都不做。我可以删除它，也可以包含它而不做任何更改。当我将其更改为$'search\u form'.triggersubmit时，它将成为一个无限循环。此时，我不确定如何让表单将数据发送到另一个视图。再次感谢你的帮助。可能是另一个问题。。。但在你最初的问题中，你使用$this。这也将是一个打字错误。应该是$this，不带单引号。谢谢Pierre。这些引语是我试图让触发器工作。在对手头的问题做了更多的搜索之后，我将发布一个新的Q。

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

$('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 + '">');

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