Question

我有一个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>

Answer 1

他们只是因为你正在做的而短暂出现：

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

这将导致表单通过浏览器提交默认进程并重新加载页面。

目前还不清楚你的意图是做什么的

Answer 2

由于$('#address').submit();，该字段的值正在重置HTML。

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

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

https://jsfiddle.net/pjpwea/y4L9qc58/

在示例中注释掉第二个$('#id_lng').val("5");以查看差异。

Answer 3

您的代码正在执行，但页面也会刷新，这就是为什么您会在短时间内看到结果。

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

您可以通过阻止实际发送表单来阻止页面刷新。

替换此行$('#address').submit(function() { 以下几行：

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

HTML jQuery submit返回纬度和经度

3 个答案: