I have created Leaflet map and event which grabs json data:

   map.on('pm:create', (e) => {
      var layer = e.layer;
      var shape = layer.toGeoJSON()
      var shape_for_db = JSON.stringify(shape);
      $('#dmodal').modal('show');
      $.ajax({
          type: "POST",
          url: "{{ url_for('maps.addohl') }}",
          contentType: "application/json",
          data: JSON.stringify({shape}),
          dataType: "json"
      });
    });

I can GET this data with route in flask like this:

@maps.route("/addohl", methods=['GET', 'POST'])
def addohl():
    form = OhlForm()
    data = request.get_json()

But, this is not practical, since I have to open new page (/addohl) to add data. Hence, I need to use modal. With $('#dmodal').modal('show'); I managed to show modal directly over current page(map) but I am puzzled how to POST json data to modal dmodal on event occurrence?

Here is the modal:

<div class="modal fade" id="dmodal" tabindex="-1" role="dialog" aria-labelledby="dmodall" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
          <h5 class="modal-title" id="dmodall">Add Data</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Add Data</button>
        </div>
      </div>
  </div>
</div>

Any help in resolving this is highly appreciated.