Leaflet – How to Submit a Form from Within a Leaflet Popup?

geojsonleafletpopup

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.

Best Answer

I figured it out! - the problem is that my function or wherever I hold my line of code to "preventDefault()" was outside of the function that created the form in the first place. I need to place the code like such:

//Custom functions upon 'edit'
      map.on('draw:created', function(e) {
          var coords = e.layer._latlng;
          console.log(coords);
          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();

        $("#form").submit(function(e){
            e.preventDefault();
            console.log("didnt submit");
            var date =$("#date").val();
            console.log(date);

        });
      });

This enables me to work on the form element before it essentially creates a new one.

Related Solutions

[GIS] Problems with features, popups and strategy with OpenLayers

you can catch your opened(active) popup with this way:

map.popups[a]

you can change so update its content:

map.popups[a].contentHTML = 'Test Content';
map.popups[a].redraw();

or

map.popups[a].setContentHTML = 'Test Content'

you can show or hide your popup:

map.popups[a].show();
map.popups[a].hide();

you can update position of your popup:

map.popups[a].lonlat.lon = 10;
map.popups[a].lonlat.lat = 10;
map.popups[a].updatePosition();

for openlayers cluster you should check out Cluster Strategy Example here. Only one thing you should do is that define fillColor or externalGraphic for your cluster.

          var style = new OpenLayers.Style({
                pointRadius: "${radius}",
                fillColor: "${getColor}",
                fillOpacity: 0.8,
                strokeColor: "#cc6633",
                strokeWidth: 2,
                strokeOpacity: 0.8
            }, {
                context: {
                    radius: function(feature) {
                        return Math.min(feature.attributes.count, 7) + 3;
                    },
                    getColor: function(feature) {
                        return // Your color selection logic;
                    }
                }
            });

As the last question, i dont understand very well what you want? but try to use removeFeatures instead of destroyFeatures....

i hope it helps you...

[GIS] Submit form information from a leaflet popup to MySQL table

Several things seem to be wrong in your code.

When you have forms inside a Leaflet popup, you want to avoid form submission in the classic way. You typically need to submit using some AJAX behind the scenes that prevent reloading your page. In order to do this, you need to prevent the default behavior for form submission. This question discusses how to achieve this. In your case, it should be sufficient to add some code like:
```
$('#form').submit(function(e){
    e.preventDefault();
});
```
after the popup creation with the form, after your code
```
var popup = L.popup({maxWidth: 1000})
...
SKIPPED, INCLUDING YOUR FORM
...
.openOn(map);
```
This makes sure your form is not going to be submitted.
You need to write the code for submitting the form manually. You can add this code after the e.preventDefault(); line in the code above or define your function addMarker handling the form submission. Write this function in the global scope, e.g. before your $(document).ready(function (){

The form submission can be handled e.g. using jQuery's post or ajax function. This answer shows well how to do this part. The URL (action URL) would be your PHP script.
You need to handle the PHP part, i.e. accessing the submitted values and inserting them in the database. The name attribute of your form controls must match the $_POST keys in your PHP file. I think you did assume that the id attribute is defining the $_POST keys. Very often, this means the name attribute has the same value as the id attribute.

For instance, your line
```
<select class="form-control" id="arrest" name="text">
```
should be
```
<select class="form-control" id="arrest" name="arrest">
```
in order to be able to retrieve its value in PHP using
```
$_POST['arrest']
```
In case your code should not only be for developing purpose, please be aware of SQL injection issues and fix your code before production. Check out e.g. this and this to start.
You would need to do the necessary action in the Leaflet popup manually, such as closing it, or displaying the submitted values. You would do this typically in the success function you provide in the jQuery ajax or post function when submitting the form.

Best Answer

Related Solutions

[GIS] Problems with features, popups and strategy with OpenLayers

[GIS] Submit form information from a leaflet popup to MySQL table

Related Question