We help IT Professionals succeed at work.

Javascript will not submit form

SqueezeOJ
SqueezeOJ asked
on
16 Comments
1 Solution
138 Views
Last Modified: 2016-02-25
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

Comment
Watch Question

View Solution Only

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Author

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
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Do you have any errors / warnings in the console?
SqueezeOJ

Author

Commented:
It says this:

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

Author

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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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();
SqueezeOJ

Author

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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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();
    }
  });
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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
SqueezeOJ

Author

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.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
SqueezeOJ

Author

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

SqueezeOJ

Author

Commented:
Thanks for sticking with me!

A million thanks!
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.

View Solution