传单弹出表单：在弹出表单提交中包含传单 latlong 值答案

【问题标题】：Leaflet Popup Form: Include Leaflet latlong values in popup form submission传单弹出表单：在弹出表单提交中包含传单 latlong 值
【发布时间】：2018-08-31 19:18:39
【问题描述】：

我有一个使用 Leaflet 的弹出表单，并希望将 eventLatLong 值作为提交的参数的一部分。所以我画了一个多边形或放下一个标记，弹出窗口应该出现一个用户输入名称的表单。此名称需要与绘图事件坐标保持一致。

这是我到目前为止的代码，我花了几个小时试图弄清楚这一点。我对 JQuery、Ajax 和 JS 等前端的东西非常陌生，因此非常感谢任何帮助。

<script>
map.on(L.Draw.Event.CREATED, function (e) {
    eventLatLong = e.layer._latlng;
    var polyEvent = drawnItems.addLayer(e.layer);
    var popupForm = '<form class="simple_form business_form" id="form" novalidate="novalidate" enctype="multipart/form-data" action="/create_section" accept-charset="UTF-8" data-remote="true" method="post" _lpchecked="1"><input name="utf8" type="hidden" value="✓">\n' +
        '    <h2>\n' +
        '<input id="coords" type="hidden" value="">\n' +
        '        <div class="input string required thing_part_name"><label class="string required control-label" for="thing_part_name" id="name"><abbr title="required">*</abbr> Name</label><input class="string required" autofocus="autofocus" type="text" name="thing_part[name]" id="thing_part_name"></div>\n' +
        '        <div class="form-actions">\n' +
        '            <input type="submit" name="commit" value="Add New Poly">\n' +
        '        </div>\n' +
        '        <br>\n' +
        '    </h2>\n' +
        '</form>';
    polyEvent.bindPopup(popupForm, {
        keepInView: true,
        closeButton: true
    }).openPopup();

    $("#form").submit(function (e) {
        e.preventDefault();
    });
});
</script>

【问题讨论】：

标签： javascript jquery ruby-on-rails-4 leaflet leaflet.draw

【解决方案1】：

我想通了。

我所要做的就是通过 jquery 的 val 函数传递 theData 值。

<script>
map.on(L.Draw.Event.CREATED, function (e) {

    var polyEvent = drawnItems.addLayer(e.layer);

    theBounds = JSON.stringify(e.layer.toGeoJSON())

    var popupForm = '<%= j render "path/to/form" %>';

    polyEvent.bindPopup(popupForm, {
        keepInView: true,
        closeButton: true
    }).openPopup();

    $('#bounds').val(theBounds);

    $("#form").submit(function (e) {
        e.preventDefault();
    });
});
</script>

【讨论】：