Avatar of SqueezeOJ
SqueezeOJ
Flag for United States of America asked on

Javascript will not submit form

Hello,

I need help figuring out why the JavaScript document.getElementById("mainform").submit(); toward the end of this code doesn't work.

Everything else about it works and if I move that code to its own button, then it works, however, inside this function it never fires.

Can you please help me get this to work?

Thanks!

Jason



<!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'"><input type="submit" name="submit" value="Submit" style="width:200;"></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> </td></tr>

<tr><td><div> </div></td><td><div><input 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();
}
</script>

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

</body>
</html>

Open in new window

JavaScriptBootstrap

Avatar of undefined
Last Comment
Rob

8/22/2022 - Mon
Rob

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

ASKER
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();"/></

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
Rob

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

Do you have any errors / warnings in the console?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
SqueezeOJ

ASKER
It says this:

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

ASKER
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?
Rob

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();
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
SqueezeOJ

ASKER
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?
Rob

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();
    }
  });
Rob

(name is a required attribute for an input element) - you could always use the <button> element as that does not require a name attribute
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
SqueezeOJ

ASKER
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>

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.
SqueezeOJ

ASKER
Rob

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>

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Rob

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
SqueezeOJ

ASKER
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>

Open in new window

SqueezeOJ

ASKER
Thanks for sticking with me!

A million thanks!
Rob

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

thanks for the points and well done spotting that other submit button!
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes