Update properties in POPUP , with leaflet and geoJson

Question

I've made a script based on : update properties of geojson to use it with leaflet

>>>Working script picture

But I have an issue with multiple arguments.. I'd like to put 2 separate variables like:

layer.feature.properties.desc = content.value;
layer.feature.properties.number = content2.value;

But

layer.bindPopup(content).openPopup()

can open only one - "content", there is an error when I put for example:

layer.bindPopup(content + content2).openPopup();

>>> Picture

So I made another script:

function addPopup(layer)
{let popupContent = 
'<form>' + 
'Description:<br><input type="text" id="input_desc"><br>' +
'Name:<br><input type="text" id="input_cena"><br>' +
'</form>';

layer.bindPopup(popupContent).openPopup();
document.addEventListener("keyup", function() {

link = document.getElementById("input_desc").value;
cena = document.getElementById("input_cena").value;

layer.feature.properties.link = link;
layer.feature.properties.cena = cena;   
}); 
};

>>>Picture

But unfortunately:

layer.feature.properties.link = link;
layer.feature.properties.cena = cena; 

Is the same for each drawn geometry. Moreover when user fill the form, the arguments will dissaper just after close PopUp.. With update properties of geojson to use it with leaflet script inscribed argument is visible each time when user "click" on PupUp

Can any one help me on this?

Answer 1

You have to add the listener in the popupopen event. Change your addPopup function to:

var openLayer;
function addPopup(layer){
  let popupContent = 
  '<form>' + 
  'Description:<br><input type="text" id="input_desc"><br>' +
  'Name:<br><input type="text" id="input_cena"><br>' +
  '</form>';
  
  layer.bindPopup(popupContent).openPopup();
  
  layer.on("popupopen", function (e) {
    var _layer = e.popup._source;
    if(!_layer.feature){
        _layer.feature = {
        properties: {}
      };
    }
    document.getElementById("input_desc").value = _layer.feature.properties.link || "";
    document.getElementById("input_cena").value = _layer.feature.properties.cena || "";
    document.getElementById("input_desc").focus();
    openLayer = _layer;
  });
  
  layer.on("popupclose", function (e) {
    openLayer = undefined;
  })
  
};

L.DomEvent.on(document,"keyup",function(){
  if(openLayer){
    link = document.getElementById("input_desc").value;
    cena = document.getElementById("input_cena").value;

    openLayer.feature.properties.link = link;
    openLayer.feature.properties.cena = cena;   
  }
})

https://jsfiddle.net/falkedesign/ntvzx7cs/