troubleshooting Question

Javascript will not submit form

Avatar of SqueezeOJ
SqueezeOJFlag for United States of America asked on
JavaScriptBootstrap
16 Comments1 Solution147 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 16 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 16 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros