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">☰</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.
Karthick Nagarajan
1,3462 gold badges15 silver badges29 bronze badges
-
Possible duplicate of "Cross origin requests are only supported for HTTP." error when loading a local file. You need to run is from a Webserver locally.Nishant– Nishant2016年12月24日 07:37:27 +00:00Commented Dec 24, 2016 at 7:37
-
Is this a single page application? Do you use a framework?SLePort– SLePort2016年12月24日 07:48:27 +00:00Commented Dec 24, 2016 at 7:48
2 Answers 2
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.
answered Dec 24, 2016 at 7:42
Karthick Nagarajan
1,3462 gold badges15 silver badges29 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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!
Comments
default