Hello. I am trying to build a delivery optimization app with openstreetmaps, leaflet, javascript with a flask back-end.
The idea is that a delivery manager can click on a map to create a texbox(es) that indicates a delivery point(s) and what she
types in the textbox(es) as the size of the order(s). I am having trouble retrieving the values entered into the textboxes using
document.getElementById().value. I have a leaflet plug-in that I use to search for a location. I also have lists/arrays
that keep track/process the coordinates of the textboxes and the distribution centre from which orders are filled.
The list of the textbox coordinates is stringified and assigned to the value of a hidden textbox.
My code for creating the map looks like this:
<body onLoad="javascript:init();">
<div id="map"></div>
<div id="map">
<input type="button" id="btn1" value="Submit" />
<input type="hidden" id="coord1" value="" />
</div>
<script language="javascript">
var map;
var str;
var dc_coords;
var counter = 0;
var coordinates = {};
var customer_orders = {};
var coords;
var coords_array;
function init() {
map = L.map('map');
//add a tile layer to add to our map, in this case it's the 'standard' OpenStreetMap.org tile server
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text. Attribution overload
var nairobi = new L.LatLng(-1.28333,36.81667); // geographical point (longitude and latitude)
map.setView(nairobi, 13);
L.marker([-1.28333,36.81667]).addTo(map)
.bindPopup('Distribution<br> Centre')
.openPopup();
coordinates[counter] = nairobi;
dc_coords = JSON.stringify(coordinates);
var osmGeocoder = new L.Control.OSMGeocoder({placeholder: 'Search location...'});
// The line above creates the search function for locating places.
map.doubleClickZoom.disable();
map.on('dblclick', onMapClick); // Here I am specifying the handler for the double-click event.
map.addControl(osmGeocoder);
}
.......
.......
.......
</script>
</body>`Preformatted text`
I am aware that global variables in javascript are a bad practice. Forgive me I am relatively new to javascript. I want to
solve the problem first. Textboxes are created by double-clicking. The handler code for double-clicking event is as follows:
<script language="javascript">
.............
.............
.............
function onMapClick(e) {
counter++;
var order_box = '<input type="text" id= ' + '"' + counter + '"' + ' onchange="doSubmit(' + "'" + counter + "'" + ')"' + ' size = "5">';
// I have also tried oninput and onblur
var myIcon = new L.divIcon({
html:order_box
});
var marker = new L.marker(e.latlng, {icon: myIcon}).addTo(map);
coordinates[counter] = e.latlng;
str = JSON.stringify(coordinates);
document.getElementById('coord1').value = str;
}
map.doubleClickZoom.enable();
</script>
I have a counter variable that keeps track of the number of textboxes created. Since I can’t know how many textboxes
will be created before hand, I use the string version of the current value of the counter variable for the id of a
textbox just created. I have specified an onchange event on each textbox created that triggers its handler passing
the id of the textbox as an argument. The code for the handler is as follows:
function doSubmit(id_string) {
alert("id_string: " + id_string);
alert("type of id_string: " + typeof(id_string));
coords = document.getElementById('coord1').value;
coords_array = coords.split("},");
var customer_order_size = document.getElementById(id_string).value;
alert("textbox_id: " + document.getElementById(id_string).id);
alert("customer_order_size: " + customer_order_size);
var current_element = (coords_array[parseInt(id_string)]).split(":{");
if(typeof(customer_order_size) != "undefined") {
var complete_entry = customer_order_size + ":" + current_element[1];
customer_orders[id_string] = complete_entry;
}
}
The problem now is that after I enter a value in the textbox and trigger the doSumbit by removing the focus from the textbox,
the document.getElementById(id_string).value is returning undefined. I have confirmed that the id is being passed correctly to
the doSubmit function and that the element exists. I have replaced onchange with onblur and oninput to no avail. I have searched
high and low, even as far as W3C Document Object Model (DOM) Level 2 Events Specification, also to no avail. I would be grateful
for pointers to what I might be doing wrong. Tested the code with Mozilla Firefox and Chrome, same result. Thanks for the anticipated help.