jquery，谷歌地图地理编码后提交表单答案

【问题标题】：jquery, submit form after google maps geocodingjquery，谷歌地图地理编码后提交表单
【发布时间】：2011-06-01 20:01:31
【问题描述】：

我有一个收集个人地址的表格。当他们点击提交时，我想对他们的地址进行地理编码，并使用它来填写 lat 和 lng 字段。这是我现在正在做的事情，它基于这里的第二个答案submit form does not stop in jquery ajax call

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var geocoder;
        var address;
        $('#theform').submit(function() {
            geocoder = new google.maps.Geocoder();
            address = $('#id_street').val() + " " + $('#id_street2').val() + " " + $('#id_city').val() + ", " + $('#id_state').val() + " " + $('#id_zip').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));
                $('#theform').unbind('submit');
                $('#theform').submit();
              } else {
                $('#theform').unbind('submit');
                $('#theform').submit();
              }
            });
            return false;
        });
    });
</script>

和表格

<form method="POST" id="theform" action="">
    <li><label for="id_street">Street</label> <input id="id_street" type="text" name="street" value="3520 Lebon Dr." maxlength="100" /></li>
    <li><label for="id_street2">Street2 (optional)</label> <input id="id_street2" type="text" name="street2" maxlength="100" /></li>
    <li><label for="id_city">City</label> <input id="id_city" type="text" name="city" value="San Diego" maxlength="50" /></li>
    <li><label for="id_state">State</label> <select name="state" id="id_state">
    ...a bunch of state options...
    <li><label for="id_zip">Zip Code</label> <input id="id_zip" type="text" name="zip" value="92122" maxlength="30" /></li>
    <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>

lat 和 lng 字段可以很好地填写，但表单实际上并没有通过 $('#theform').submit() 提交。要实际提交表单，您必须再次单击提交。

关于我做错了什么有什么想法吗？如果有人问我是否想提交表单，即使地理编码不成功，因为在这种情况下，我将使用 geopy 对地址服务器端进行地理编码。

编辑：好的，所以我做了一个非常简单的例子，根本无法提交工作：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    $('#subby').click(function() {
        $('#theform').submit();
    });
});

</script>

</head>
<body>
<a href="#" id="subby">Submit</a>
<form id="#theform" action="javascript:alert('success!');">
      <input type="submit" />
</form>
</body>
</html>

我希望单击提交链接时，您会像单击提交按钮时一样收到警告框，但事实并非如此。我提交有什么问题？

【问题讨论】：

您是否通过调试器运行过它？第一次运行该方法时，可能会遇到return false;，这将停止提交。
我在 return false 和 $('#theform').unbind('submit');在如果。它首先返回 false，但随后（大概是当对 google 的异步调用返回时）也遇到了另一个断点，之后它应该转到 $('#theform').submit()。但是表单仍然没有提交。
所以它确实击中了$('#theform').submit()？有没有办法可以编辑代码，使return false 位于if 或else 中。虽然它可以回到上一个断点，但我猜想达到 return false 会使程序感到困惑
是的，它确实命中了 $('#theform').submit()，我尝试在那里设置一个断点，它会到达那里。我不确定如何使用条件，因为对 google 的调用是异步的。我需要它始终为假，因此它不会在谷歌返回 lat 和 lng 之前提交表单。我编辑了我的问题并添加了一个非常简单的提交示例，但我无法开始工作。你能测试一下，看看你是否知道我做错了什么？
还是不行吗？如果是这样我回家后看看它

标签： javascript jquery google-maps

【解决方案1】：

我刚刚想通了。我不小心从我发布的表单中省略了我的提交按钮。它被命名为提交。显然这让 jquery 搞砸了（在此感谢：jQuery doesn't submit a form）。我发布的简单示例仍然无法正常工作，我不知道为什么，但我的实际问题已解决。

【讨论】：