/    Sign up×
Community /Pin to ProfileBookmark

document.getElementById().value not returning textbox value

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: ‘&copy; <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>
“`

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.

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @imonike spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...