title: jquery, submit form after google maps geocoding
body: <p>I have a form which collects a persons address.  When they click submit I want to geocode their address, and use that to fill lat and lng fields.  Here is what I am doing now which is based on the 2nd answer here <a href="https://stackoverflow.com/questions/804946/submit-form-does-not-stop-in-jquery-ajax-call">submit form does not stop in jquery ajax call</a></p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(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;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and the form</p>
  
  <pre><code>&lt;form method="POST" id="theform" action=""&gt;
      &lt;li&gt;&lt;label for="id_street"&gt;Street&lt;/label&gt; &lt;input id="id_street" type="text" name="street" value="3520 Lebon Dr." maxlength="100" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label for="id_street2"&gt;Street2 (optional)&lt;/label&gt; &lt;input id="id_street2" type="text" name="street2" maxlength="100" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label for="id_city"&gt;City&lt;/label&gt; &lt;input id="id_city" type="text" name="city" value="San Diego" maxlength="50" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label for="id_state"&gt;State&lt;/label&gt; &lt;select name="state" id="id_state"&gt;
      ...a bunch of state options...
      &lt;li&gt;&lt;label for="id_zip"&gt;Zip Code&lt;/label&gt; &lt;input id="id_zip" type="text" name="zip" value="92122" maxlength="30" /&gt;&lt;/li&gt;
      &lt;label for="id_lat"&gt;Latitude&lt;/label&gt;&lt;input type="text" name="lat" value="0.000000" id="id_lat" /&gt;
      &lt;label for="id_lng"&gt;Longitude&lt;/label&gt;&lt;input type="text" name="lng" value="0.000000" id="id_lng" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The lat and lng fields get filled fine, but the form does not actually get submitted by $('#theform').submit().  To actually submit the form you have to click submit again.</p>
  
  <p>Any ideas about what I am doing wrong?
  And in case anyone asks I do want to submit the form even if geocoding is unsuccessful as in that case I will be using geopy to geocode the address server side.</p>
  
  <p>edit:
  Ok so I made a really simple example and can't get submit to work at all:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function() {
      $('#subby').click(function() {
          $('#theform').submit();
      });
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="#" id="subby"&gt;Submit&lt;/a&gt;
  &lt;form id="#theform" action="javascript:alert('success!');"&gt;
        &lt;input type="submit" /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would expect that when clicking the link Submit you would get an alertbox just like when you click the submit button, but this is not the case.  What am I doing wrong with submit?</p>