5

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.

  • how you did to save the form content in a geojson file? – user70827 Apr 7 '16 at 19:55
  • @AlexSantos I had been collecting information using the form then arranging it all together in geojson format and "adding" the new feature with attributes to the map. I got my specific geojson template from the map service url and I copied the geojson. You can find more info on geojson formats by googling them...geojson.org – Stella Apr 8 '16 at 16:56
6

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.