I have a problem with a leaflet popup. I made a form in it and when I try to send form with jquery & AJAX to postgis, data inserts correctly but blank page loads. How to update popup with response without losing map page/page reload ?

my code

var daneOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var myaMap = L.map('mapid',{center:[52.23, 21.0], zoom: 15});

myMap.on('click', function(e){
        var SZER = e.latlng.lat;
        var DL = e.latlng.lng;

        L.marker(e.latlng).bindPopup('<form action="query_insert.php" method="post" id="myForm"><h1>title</h1><br/>random text<br/><input type="text" name="SZER" value='+SZER+'><br/> random text<br/><input type="text" name="DL" value='+DL+'><br/><br/><input type="submit" value="wyślij formularz" id="wyslij"></form>').addTo(myMap);

            var form = $(this).serialize();
                url: form.attr('action'),
                type: form.attr('method'), 
                data: { 
                    SZER: SZER,
                    DL: DL,
                success: function(msg){
                    console.log('Server response :\n '+msg); 
            error: function (ajaxContext){

    require_once ("connect.php");


$sql=pg_query("INSERT INTO public.tabela_testowa(
    VALUES ( ST_GeomFromEWKT('SRID=4326; POINT($php_zmienna_DL $php_zmienna_SZER)'));");

if ($sql){
//  echo "works";
    echo 'not this time...';



  • I think you can find this example useful: embed.plnkr.co/8qVoW5. Mainly skip the button method (just make it default ajax post ) also in the example: close the popup on submit. – NettaB May 8 at 13:15

Your Answer

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

Browse other questions tagged or ask your own question.