Форма Django обновляется некорректно

Я сделал Django сайт с динамически генерируемыми формами. Сайт основан на Leaflet.js в качестве фронтенда, JS библиотеке для веб-картографии.

Я клонировал форму из HTML в JS скрипт, чтобы привязать форму как всплывающее окно каждого географического объекта. Моя идея состоит в том, чтобы обновлять эти всплывающие окна/формы, когда пользователь обновляет данные в поле, например, вводит данные об объекте ( "Этот дом заброшен", "Это дерево очень большое", просто глупые примеры).

Проблема в том, что AJAX запрос отправляет не правильные данные, а пустую форму, присутствующую в HTML документе.

Как я могу обратиться к обновленной форме для отправки данных? POST запрос отправляется правильно, но приходит пустой, так как отправляется пустая форма.

Мой AJAX запрос:

$(document).on('click', '#submitButton', function(e){
      e.preventDefault();
      $.ajax({
           type : "POST",
           headers: {'X-CSRFToken': csrf_token},
           url: "update_note/",
           data: {
            id: $('#id_id').val(),
            note_heading: $('#id_note_heading').val(),
            note_des: $('#id_note_des').val(),
            dataType: "json"
           },
           success: function(json){
            $('#form_pop').val(''); // remove the value from the input
            console.log(json); // log the returned json to the console
            console.log("success"); // another sanity check
           },
           failure: function() {
              console.log('error')
           }
       });
       return false
 });

Как я привязываю скрытую форму в HTML к функциям Leaflet, получая данные из БД, предварительно заполняя форму, если есть данные об этой функции:

var pop_up = document.getElementById('form_pop').cloneNode(true); pop_up.hidden = false

async function render_geodata(name) {
    const data = await load_geodata(name);
    L.geoJSON(data, {
      onEachFeature: function (feature, layer) {
        pop_up_cl = pop_up.cloneNode(true)
        pop_up_cl.id_id.value = feature.id
        pop_up_cl.id_note_heading.value = feature.properties.note_heading
        pop_up_cl.id_note_des.value = feature.properties.note_des
        layer.bindPopup(
          pop_up_cl
          );
      }
    }).addTo(map)
  }

Example

Моя форма DTL: 

<form id='form_pop' method = "POST" hidden= 'true'>
  {% csrf_token %}
  {{ form }}
  <button type="button" id="submitButton">Send</button>
</form>

Моя форма Django:

from django import forms

class markerNote(forms.Form):
    id = forms.IntegerField()
    note_heading = forms.CharField()
    note_des = forms.CharField()
Вернуться на верх