HTMLjQuerySubmit返回纬度和经度

我有一个HTML表单，我想能够填写，然后提交，然后有纬度和经度出现在提交。这似乎是工作，但lat和long只出现了一瞬间

这是我的密码：

<div class="container" ng-controller="TestCtrl">
    <h2>Test Form</h2>
    <form id="address" method="post">
        <div class="form-group">
            <label for="inputText1">Street</label>
            <input type="text" class="form-control" id="street_name" placeholder="Street" ng-model="street" name="street_address">
        </div>
        <div class="form-group">
            <label for="inputText2">House Number</label>
            <input type="text" class="form-control" id="street_number" placeholder="House Number" ng-model="housenumber" name="house_number">
        </div>
        <div class="form-group">
            <label for="inputText3">Postal Code</label>
            <input type="text" class="form-control" id="postal_code" placeholder="Postal Code" ng-model="postalcode" name="postal_code">
        </div>
        <div class="form-group">
            <label for="inputText4">City</label>
            <input type="text" class="form-control" id="city" placeholder="City" ng-model="city" name="city">
        </div>
       <button id="sub" type="submit" class="btn btn-default">SAVE</button>
        <label for="id_lat">Latitude</label><input type="text" name="lat" value="0.000000" id="id_lat" />
        <label for="id_lng">Longitude</label><input type="text" name="lng" value="0.000000" id="id_lng" />
    </form>
</div>

 <script type="text/javascript">
    $(document).ready(function() {
        var geocoder;
        var address;
        $('#address').submit(function() {
            geocoder = new google.maps.Geocoder();
            address = $('#street_name').val() + " " + $('street_number').val() + " " + $('#postal_code').val() + ", " + $('#city').val();
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                $('#id_lat').val(results[0].geometry.location.lat().toFixed(6));
                $('#id_lng').val(results[0].geometry.location.lng().toFixed(6));
                $('#address').unbind('submit');
                $('#address').submit();
              } else {
                $('#address').unbind('submit');
                $('#address').submit();
              }
            });
            return false;
        });
    });
</script>
</body>
</html>

测试表
街头
门牌号
邮政编码
城市
拯救
纬度
经度
$（文档）.ready（函数（）{
var地理编码器；
var地址；
$（'#address'）。提交（函数（）{
geocoder=新的google.maps.geocoder（）；
地址=$（'街道名称'）.val（）+“”+$（'街道编号'）.val（）+“”+$（'邮政编码'）.val（）+，“+$（'城市'）.val（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
$（'#id_lat'）.val（结果[0].geometry.location.lat（）.toFixed（6））；
$（'#id_lng'）.val（结果[0].geometry.location.lng（）.toFixed（6））；
$（'地址'）。解除绑定（'提交'）；
$（“#地址”）.submit（）；
}否则{
$（'地址'）。解除绑定（'提交'）；
$（“#地址”）.submit（）；
}
});
返回false；
});
});

它们只会短暂出现，因为您正在执行以下操作：

$('#address').unbind('submit');
$('#address').submit();

这将导致表单按浏览器默认流程提交，页面将重新加载

---

不清楚您这样做的目的是什么

由于

$（'#address'）。submit（），该字段的值正在从HTML中重置

如果在此之后使用jQuery更改值，它将起作用：

$(document).ready(function() {
    $('#address').submit(function() {
         $('#id_lat').val("5");
         $('#id_lng').val("5");
         $('#address').submit();
         });
       $('#id_lng').val("5");
    });


注释掉第二个
$（'id_lng'）.val（“5”）在示例中查看差异。
您的代码正在执行，但页面也正在刷新，这就是为什么您会在一瞬间看到结果

如果提交表单，它将重定向到操作参数的url。当没有操作参数时，页面将刷新

通过阻止实际发送表单，可以防止页面刷新

替换此行
$（'#address'）。提交（function（）{
下面是几行：

$('#address').submit(function(e) {
    e.preventDefault();    

return false
OP使用时也会阻止默认值。表单刷新页面的原因与此不同。我在这个JSFIDLE中尝试过：当您取消对preventDefault行的注释时，您会看到差异。我看到了更多的地方，其中return false没有正确阻止表单提交。但是您没有检查错误控制台，因为
google
和
geocoder
未定义，它只会抛出错误，从而阻止返回。如何防止页面重新加载？删除这些行。如前所述，我不知道它们为什么会出现，也不知道您的意图是什么。jQuery新手。显然需要更多练习。感谢朋友的帮助！