リーフレットポップアップの値をフォームに挿入して送信

Question

ここに私のマップコードがあります。私はちょうど私がLat Lngポップアップがフォームにクリックしてクリックして表示する値を取得するのだろうか？

1. ユーザーがマップ

2. がポップアップを座標（彼らが今そうであるように）と同じクリックで

3. ユーザーが提出ヒットフォームを記入座標クリックする、のようなので、基本的には次のようになります！ここで

それが重要場合には私も自分のフォームが含まれているコード、

<script> 

var mymap = L.map('mapid').setView([38.47939, -99.49219], 5); 

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYnJldHQyMjI3OCIsImEiOiJjajAzNzZjZTkwOWNtMzJxbHZjMmVwZ2hyIn0.cWzkt6Gj_N3SZ8GKzqhByA', { 
    }).addTo(mymap); 

    var popup = L.popup(); 

    function onMapClick(e) { 

     popup 
      .setLatLng(e.latlng) 
      .setContent("Copy and Paste into the Form \n" + e.latlng.toString()) 
      .openOn(mymap); 

    } 

    mymap.on('click', onMapClick); 


</script> 

ある - フォームがそのまま動作しますが、手動でデータを入力することができ、それがMySQLのに挿入されます私はちょうど必要自動挿入を理解するのに役立ちます...どんな助けも大歓迎です。あなたのonMapClicked機能で

<div class="container"> 
    {% from "_formhelper.html" import render_field %} 
    <form method=post action="/add_spot/"> 
    <dl> 
     {{render_field(form.lat)}} 
     {{render_field(form.lng)}} 
    </dl> 
    <p><input type=submit value=Submit></p> 
    </form> 
    {% if error %} 
    <p class="error">{{error}}</p> 
    {% endif %} 
</div> 

Answer 1

だけ使用します。

document.getElementById('your-input-id').value = e.latlng.toString(); 

では、次のHTMLフォームを持っていると仮定すると：

<form> 
    <input type="text" name="lat-lng" id="lat-lng" /> 
    <input type="submit" value="GO" /> 
</form> 

これはあなたの関数のようになります。

function onMapClick(e) { 
    document.getElementById('lat-lng').value = e.latlng.toString(); 

    popup 
     .setLatLng(e.latlng) 
     .setContent("Copy and Paste into the Form \n" + e.latlng.toString()) 
     .openOn(mymap); 
}