Javascript will not submit form

The form is submitted before this function fires.  Change the button from "type='submit'" to "type='button'"

Hi Rob,

I believe you're talking about Line 97.  However, I think that I've already got that type.  Here's the line:

<input type="button" value="Submit" onclick="GetLatitudeLongitude();"/></

Select all Open in new window

Am I missing something?

Also, I know that GetLatitudeLongitude() is firing because it populates the form fields.  It just never posts.  It just sits there.

Thanks for thinking about this!

Jason

You did, sorry my bad.  Just read it too quickly.

Do you have any errors / warnings in the console?

It says this:

TypeError: document.getElementById(...).submit is not a function

I think this post explains the solution, but I can't figure it out!

http://www.xpertdeveloper.com/2012/05/property-submit-of-object-is-not-a-function/

Based on this article...how do I fix my form?

That link doesn't apply as you're not using the "name" attribute for your button.  What browser are you testing in?

Given you're using jquery, try this instead:

document.getElementById("mainform").submit();

change to:

$("#mainform").submit();

Hi Rob,

You're right that I wasn't using a name or id and it shouldn't mater, but when I added both to my input button, things got better.

This input: <input name="form_submit" id="form_submit" type="button" value="Submit" onclick="GetLatitudeLongitude();"/>

With this submit: document.getElementById("mainform").submit();

Half solves my question.

The other half of the problem is that it doesn't update my Latitude & Longitude bfore submitting ,so those don't get changed during post.  Perhaps I'm putting the submit in the wrong place in the script?  Or I need to wait for the Geocoder to send the output before firing the submit?

Your thoughts?

That's right, you need to wait until the geocode has finished.  just put the submit inside the callback:

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      //alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
      document.getElementById("geolatitude").value = latitude;
      document.getElementById("geolongitude").value = longitude;
      document.getElementById("geoaddress").value = address;
  //--- Trigger Form Submit -----------------------------------
  document.getElementById("mainform").submit();
    }
  });

(name is a required attribute for an input element) - you could always use the <button> element as that does not require a name attribute

OK - the <button> element makes the submit work great.  

Unfortunately, no mater where I put the submit it submits BEFORE ever updating the Latitude and Longitude.  I tried two locations (one at a time), noted in the code below:

<script type="text/javascript">

function GetLatitudeLongitude() {

  //--- Build Address ---------------------------------------
  var street  = document.getElementById("street1");
  var city    = document.getElementById("city");
  var state   = document.getElementById("state");
  var zip     = document.getElementById("zip");
  var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;

  //--- Geocode Address -------------------------------------
  var geocoder = new google.maps.Geocoder();  
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      //alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
      document.getElementById("geolatitude").value = latitude;
      document.getElementById("geolongitude").value = longitude;
      document.getElementById("geoaddress").value = address;

      //--- Trigger Form Submit -----------------------------------
      document.getElementById("mainform").submit();     // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
    } 
  }); 

  //--- Trigger Form Submit -----------------------------------
  document.getElementById("mainform").submit();         // LOCATION 2 SUBMITS BUT NO LAT / LONG VALUES
}
</script>

Select all Open in new window

Gotta figure out how to get the latitude and longitude into the elements before running the final submission.  Must have something to do with the time out.

What do you think about this article: http://stackoverflow.com/questions/18253680/how-to-wait-for-google-geocoder-geocode

stick with this as this is correct:

<script type="text/javascript">

function GetLatitudeLongitude() {

  //--- Build Address ---------------------------------------
  var street  = document.getElementById("street1");
  var city    = document.getElementById("city");
  var state   = document.getElementById("state");
  var zip     = document.getElementById("zip");
  var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;

  //--- Geocode Address -------------------------------------
  var geocoder = new google.maps.Geocoder();  
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      //alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
      document.getElementById("geolatitude").value = latitude;
      document.getElementById("geolongitude").value = longitude;
      document.getElementById("geoaddress").value = address;

      //--- Trigger Form Submit -----------------------------------
      document.getElementById("mainform").submit();     // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
    } 
  }); 
}
</script>

Select all Open in new window

Thank you, Rob!  I put all those things together and got a solution.  There was one thing we didn't see in the original page: a second Submit button at the top of the form.  Once I removed that all your  other advice started working.  I'm posting the final page here:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Edit Citizen</title>

    <!-- Bootstrap Related Code -->
    <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- J-Query Related Code -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      .container {height: 100%;}
    </style>

</head>

<body>

  <!-- Bootstrap NavBar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://www.squeezeoj.com/index.php">BCLD8</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="http://www.squeezeoj.com/index.php">Home</a></li>
          <li><a href="maps.html">Map</a></li>
          <li><a href="citizens.php">Citizens</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://www.squeezeoj.com/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

  <div class="container">
    <p><br/><br/></p>
  <!-- BEGIN CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<H1>Edit Citizen</H1>
<form name="mainform" id="mainform" action="citizens_edit_action.php" method="post">

<table>

<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">Actions:</td><td><div style="text-align:left; font-weight:normal;"><input type="button" name="Delete" value="Delete" onclick="self.location='citizens_delete_confirmation.php?id=1'"></div></td></tr>

<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">ID:</td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="cid" id="cid" size="5" value="1" readonly></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">First Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="first" id="first" size="30" value="Jack"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Last Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="last" id="last" size="50" value="Smith"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Street 1:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street1" id="street1" size="50" value="123 Main St."></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Street 2:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street2" id="street2" size="50" value=""></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">City:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="city" id="city" size="30" value="Anywhere"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">State:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="state" id="state" size="5" value="NY"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Zip:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="zip" id="zip" size="5" value="99999"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">GeoLatitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolatitude" id="geolatitude" size="50" value="0"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">GeoLongitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolongitude" id="geolongitude" size="50" value="0"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">GeoAddress:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geoaddress" id="geoaddress" size="50" value=""></div></td></tr>

<tr><td colspan=2>NOTE: This form cannot currently handle apostrophes in input. Need to sanitize fields before submitting to database.</td></tr>

<tr><td colspan=2>&nbsp;</td></tr>

<tr><td><div>&nbsp;</div></td><td><div><input name="form_submit" id="form_submit" type="button" value="Submit" onclick="GetLatitudeLongitude();"/></div></td></tr>

</table>

</form>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function GetLatitudeLongitude() {

  //--- Build Address ---------------------------------------
  var street  = document.getElementById("street1");
  var city    = document.getElementById("city");
  var state   = document.getElementById("state");
  var zip     = document.getElementById("zip");
  var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;

  //--- Geocode Address -------------------------------------
  var geocoder = new google.maps.Geocoder();  
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
      document.getElementById("geolatitude").value = latitude;
      document.getElementById("geolongitude").value = longitude;
      document.getElementById("geoaddress").value = address;

      //--- Trigger Form Submit -----------------------------------
      document.getElementById("mainform").submit();     // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
    } 
  }); 

}
</script>

  <!-- END CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  </div>

</body>
</html>

Select all Open in new window

Thanks for sticking with me!

A million thanks!

don't you just hate those obvious ones!  *laughing*

thanks for the points and well done spotting that other submit button!