Javascript - Submission form Error

Question

I have encountered an error when trying to submit this second form (latlngform) that dynamically appears according to the response provided in the first form. I have not tested whether the script in the submit() function works as the error does not allow my program to continue.

Error:
jquery-1.11.3.min.js:5 XMLHttpRequest cannot load file:///C:/Users/.../index.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource 

Below is the erroneous part of my code:

<div data-role="page" id="pagefive">
  <div data-role="header" data-position="fixed">
    <h1>Location of Meeting</h1>
    <a href="#pageone" data-role="button" data-inline="true">Go back</a>
    <a href="#mypanel" class="hamburger">&#9776;</a>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="content" id="content">
      <form id="inputpax" action='#pagefive'>
        <select name="pax" id="pax" data-inline="true">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <input type="submit" value="Submit" id="submitpax" />
      </form>

      <div data-role="content" id="latlngform"></div>

      <div id="map" style="height: 400px;"></div>
    </div>
  </div>

  <div data-role="panel" id="mypanel">
    <ul>
      <a href="#pagetwo">Create Meetings</a><br/>
      <a href="#pagethree">Display meetings</a><br/>
      <a href="#pageseven">Past Meetings</a><br/>
      <a href="#pagefive">Find Midpoint</a><br/>
    </ul>

  </div>
</div>

<script>
  $("#inputpax").submit(function(event) {
    event.preventDefault();
    var selectList = document.getElementById("pax");
    var pax = selectList.options[selectList.selectedIndex].value;
    var form = "<form id='inputLatLng' action='#pagefive' >";
    for (count = 0; count < pax; count++) {
      form += "<div class='ui-field-contain'> <label for='location'>Latitude " + (count + 1) + " :</label><input type='text' id='lat" + count + "' data-clear-btn='true'></div><div class='ui-field-contain'><label for='location'>Longitude " + (count + 1) + " :</label><input type='text' id='long" + count + "' data-clear-btn='true'></div>";
    }
    form += "<input type='hidden' value='" + pax + "' id='noOfPax' />";
    form += "<input type='submit' value='Submit' id='submit'></form>";
    document.getElementById("latlngform").innerHTML = form;
  });

  $("#inputLatLng").submit(function(event) {
    event.preventDefault();
    var noPax = document.getElementById("noOfPax");
    console.log(noPax);
    var locations = [];
    for (count = 0; count < noPax; count++) {
      var latStr = lat + count;
      var longStr = long + count;
      console.log("hi2");
      var latitude = document.getElementById(latStr);
      var longitude = document.getElementById(longStr);
      console.log("hi3");
      locations.push([latitude, longitude]);
    }

    var bound = new google.maps.LatLngBounds();
    for (i = 0; i < locations.length; i++) {
      bound.extend(new google.maps.LatLng(locations[i][1], locations[i][2]));

              // OTHER CODE
            }

    var centreLatLng = bound.getCenter();

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: centreLatLng,
      mapTypeId: 'roadmap'
    });

    var markercenter = new google.maps.Marker({

      position: centreLatLng,
      title: "test Centre",
      animation: google.maps.Animation.Drop

    });
    markercenter.setMap(map);

    var infowindow = new google.maps.InfoWindow({
      content: "This is the centre location. <br/> You can find a desired meetup point within 100m radius of this marker."
    });

    markercenter.addListener('click', function() {
      markercenter.setAnimation(google.maps.Animation.BOUNCE);
      infowindow.open(map, markercenter);
    });
  });
</script>

Note: For example, if 3 was chosen in the form inputpax, 3 latitude and longitude fields will be shown in the form latlngform. The error message appears in the console log after clicking on the Submit button in latlngform.

Any help would be greatly appreciated.

Answer 1

submit is not a function

means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.

When you name the button submit, you override the submit() function on the form.

Answer 2

Turns out I solved my problem.. Instead of declaring the <form> and form id in the innerHTML tag, declaring it as a HTML tag worked.

My code is as follows:

<form id="inputLatLng" action='#pagefive'>
    <div data-role="content" id="latlngform"></div>
</form>

<script>
    $("#inputpax").submit(function (event) {
        event.preventDefault();
        var selectList = document.getElementById("pax");
        var pax = selectList.options[selectList.selectedIndex].value;
        var form = "";
        for (count = 0; count < pax; count++) {
            form += "<div class='ui-field-contain'> <label for='location'>Latitude " + (count + 1) + " :</label><input type='text' id='lat" + count + "' data-clear-btn='true'></div><div class='ui-field-contain'><label for='location'>Longitude " + (count + 1) + " :</label><input type='text' id='long" + count + "' data-clear-btn='true'></div>";
        }
        form += "<input type='hidden' value='" + pax + "' id='noOfPax' />";
        form += "<input type='submit' value='Generate' id='submitlatlng' />";
        document.getElementById("latlngform").innerHTML = form;
      });
</script>

Hope it helps anyone who stumbles across this problem as well. Cheers!