I want to submit a form from within a leaflet popup simply using javascript and geojson. I am essentially collecting attribute information in the form and then I want to process the information into a new feature, using the coordinates from the marker on the map. The form is within a leaflet popup and upon "submit" I want to "preventDefault" and then do something. I am using the form within leaflet.draw plugin.
The process goes: load map with draw capabilities (no edit or delete), click draw tool, click map to add point, temporary marker placed with an open popup containing a form, submit to add marker to a current feature layer after converting from geojson.
Currently, on submit the page reloads and nothing happens. I can't even log something in the console.
Here is my code:
<script>
//MAP//
var map = L.map('map').setView([37, -120], 7);
L.esri.basemapLayer("DarkGray", {
detectRetina: true
}).addTo(map);
L.esri.basemapLayer('DarkGrayLabels').addTo(map);
//EDIT-
//create temp layer to store new features
var featureGroup = L.featureGroup().addTo(map);
//create drawing controls and toolbar
var drawControl = new L.Control.Draw({
draw: {
circle: false,
marker: true,
polyline: false,
polygon: false,
rectangle: false
}
}).addTo(map);
//Custom functions upon 'edit'
map.on('draw:created', function(e) {
var coords = e.layer._latlng;
var tempMarker = featureGroup.addLayer(e.layer);
var popupContent = '<form role="form" id="form" enctype="multipart/form-data" class = "form-horizontal" onsubmit="addMarker()">'+
'<div class="form-group">'+
'<label class="control-label col-sm-5"><strong>Date: </strong></label>'+
'<input type="date" placeholder="Required" id="date" name="date" class="form-control"/>'+
'</div>'+
'<div class="form-group">'+
'<label class="control-label col-sm-5"><strong>Gender: </strong></label>'+
'<select class="form-control" id="gender" name="gender">'+
'<option value="Male">Male</option>'+
'<option value="Female">Female</option>'+
'<option value="Other">Other</option>'+
'</select>'+
'</div>'+
'<div class="form-group">'+
'<label class="control-label col-sm-5"><strong>Age: </strong></label>'+
'<input type="number" min="0" class="form-control" id="age" name="age">'+
'</div>'+
//...
'<div class="form-group">'+
'<label class="control-label col-sm-5"><strong>Description: </strong></label>'+
'<textarea class="form-control" rows="6" id="descrip" name="descript">...</textarea>'+
'</div>'+
'<input style="display: none;" type="text" id="lat" name="lat" value="'+coords.lat.toFixed(6)+'" />'+
'<input style="display: none;" type="text" id="lng" name="lng" value="'+coords.lng.toFixed(6)+'" />'+
'<div class="form-group">'+
'<div style="text-align:center;" class="col-xs-4 col-xs-offset-2"><button type="button" class="btn">Cancel</button></div>'+
'<div style="text-align:center;" class="col-xs-4"><button type="submit" value="submit" class="btn btn-primary trigger-submit">Submit</button></div>'+
'</div>'+
'</form>';
tempMarker.bindPopup(popupContent,{
keepInView: true,
closeButton: false
}).openPopup();
});
function addMarker(e){
e.preventDefault();
var date = document.getElementById("date").value;
console.log(date);
};
//...
</script>
I also tried calling my function addMarker by calling the button class, by getting the button element by id, and by getting the form element by id and reordering my code as such.
$("#form").submit(function(event){
event.preventDefault();
addMarker();
});
What is the best way to successfully "submit" the form from within a leaflet popup during 'leaflet.draw:created' without using php? I do not want to store this information in a database, but rather want to use it to add a new feature with many attributes.
