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

SqueezeOJAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
The form is submitted before this function fires.  Change the button from "type='submit'" to "type='button'"
0
SqueezeOJAuthor Commented:
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
0
RobOwner (Aidellio)Commented:
You did, sorry my bad.  Just read it too quickly.

Do you have any errors / warnings in the console?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

SqueezeOJAuthor Commented:
It says this:

TypeError: document.getElementById(...).submit is not a function
0
SqueezeOJAuthor Commented:
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?
0
RobOwner (Aidellio)Commented:
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();
0
SqueezeOJAuthor Commented:
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?
0
RobOwner (Aidellio)Commented:
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();
    }
  });
1
RobOwner (Aidellio)Commented:
(name is a required attribute for an input element) - you could always use the <button> element as that does not require a name attribute
1
SqueezeOJAuthor Commented:
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.
0
SqueezeOJAuthor Commented:
0
RobOwner (Aidellio)Commented:
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

1
RobOwner (Aidellio)Commented:
scratch the <button> element.  changing too many things.

should work if you just go back to your input element:

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

Buttons are interpreted differently and regardless of whether you specify or not, the first <button> is always treated like a submit button.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SqueezeOJAuthor Commented:
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

0
SqueezeOJAuthor Commented:
Thanks for sticking with me!

A million thanks!
0
RobOwner (Aidellio)Commented:
don't you just hate those obvious ones!  *laughing*

thanks for the points and well done spotting that other submit button!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.