title: Javascript - Submission form Error
body: <p>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 <code>submit()</code> function works as the error does not allow my program to continue.</p>
  
  <pre><code>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 
  </code></pre>
  
  <p>Below is the erroneous part of my code:</p>
  
  <pre><code>&lt;div data-role="page" id="pagefive"&gt;
    &lt;div data-role="header" data-position="fixed"&gt;
      &lt;h1&gt;Location of Meeting&lt;/h1&gt;
      &lt;a href="#pageone" data-role="button" data-inline="true"&gt;Go back&lt;/a&gt;
      &lt;a href="#mypanel" class="hamburger"&gt;&amp;#9776;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div data-role="main" class="ui-content"&gt;
      &lt;div data-role="content" id="content"&gt;
        &lt;form id="inputpax" action='#pagefive'&gt;
          &lt;select name="pax" id="pax" data-inline="true"&gt;
            &lt;option value="0"&gt;0&lt;/option&gt;
            &lt;option value="1"&gt;1&lt;/option&gt;
            &lt;option value="2"&gt;2&lt;/option&gt;
            &lt;option value="3"&gt;3&lt;/option&gt;
            &lt;option value="4"&gt;4&lt;/option&gt;
            &lt;option value="5"&gt;5&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="submit" value="Submit" id="submitpax" /&gt;
        &lt;/form&gt;
  
        &lt;div data-role="content" id="latlngform"&gt;&lt;/div&gt;
  
        &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div data-role="panel" id="mypanel"&gt;
      &lt;ul&gt;
        &lt;a href="#pagetwo"&gt;Create Meetings&lt;/a&gt;&lt;br/&gt;
        &lt;a href="#pagethree"&gt;Display meetings&lt;/a&gt;&lt;br/&gt;
        &lt;a href="#pageseven"&gt;Past Meetings&lt;/a&gt;&lt;br/&gt;
        &lt;a href="#pagefive"&gt;Find Midpoint&lt;/a&gt;&lt;br/&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $("#inputpax").submit(function(event) {
      event.preventDefault();
      var selectList = document.getElementById("pax");
      var pax = selectList.options[selectList.selectedIndex].value;
      var form = "&lt;form id='inputLatLng' action='#pagefive' &gt;";
      for (count = 0; count &lt; pax; count++) {
        form += "&lt;div class='ui-field-contain'&gt; &lt;label for='location'&gt;Latitude " + (count + 1) + " :&lt;/label&gt;&lt;input type='text' id='lat" + count + "' data-clear-btn='true'&gt;&lt;/div&gt;&lt;div class='ui-field-contain'&gt;&lt;label for='location'&gt;Longitude " + (count + 1) + " :&lt;/label&gt;&lt;input type='text' id='long" + count + "' data-clear-btn='true'&gt;&lt;/div&gt;";
      }
      form += "&lt;input type='hidden' value='" + pax + "' id='noOfPax' /&gt;";
      form += "&lt;input type='submit' value='Submit' id='submit'&gt;&lt;/form&gt;";
      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 &lt; 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 &lt; 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. &lt;br/&gt; 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);
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Note: For example, if <code>3</code> was chosen in the form <code>inputpax</code>, 3 latitude and longitude fields will be shown in the form <code>latlngform</code>. The error message appears in the console log after clicking on the <code>Submit</code> button in <code>latlngform</code>.</p>
  
  <p>Any help would be greatly appreciated.</p>