Отправка формы Django через Javascript возвращает пустые поля

В моем HTML-документе есть форма, для которой я предлагаю несколько примеров ее заполнения. Пользователь может нажать на один из этих примеров, и он вызовет функцию javascript, которая предварительно заполнит и отправит форму.

Функция submit работает правильно, но возвращает пустые поля. У вас есть идеи почему?

Мой HTML: форма имеет 5 полей (сумма, категория, название, срок действия, приоритет), 4 примера:

          <form method="POST" id="myform">
              {% csrf_token %}
              <label for="amount" class="form-label h6 mb-0 text-dark font-weight-bold" style="width: 120px;">Target amount</label>
              <input name="amount" id="amount" placeholder="0" style="width: 200px;">
              <input type="hidden" name="category" id="category">
              <input type="hidden" name="title" id="title" value="">
              <input type="hidden" name="expiration" id="expiration">
              <input type="hidden" name="priority" id="priority">
              <div class="goals-template align-items-center text-center mb-4">
                  <a class="template" onclick="FormSubmit(this)"><img class="template-item" src="{% static 'img/undraw_emergency2.svg' %}">Emergency Fund</a>
                  <a class="template" onclick="FormSubmit(this)"><img class="template-item" src="{% static 'img/undraw_car2.svg' %}">New car</a>
                  <a class="template" onclick="FormSubmit(this)"><img class="template-item" src="{% static 'img/undraw_house2.svg' %}">House</a>
                  <a class="template" onclick="FormSubmit(this)"><img class="template-item" src="{% static 'img/undraw_wishlist2.svg' %}">Wishlist</a>
                  <button type="submit" class="d-none" id="Go">Save goal</button>
              </div>

        </form>

Мой JS:

function FormSubmit(e) {
    var myform = document.getElementById("myform");
    document.getElementById('category').value = 'RETIREMENT';
    document.getElementById('title').value = '10';
    document.getElementById('amount').value = 10;
    document.getElementById('expiration').value = '2022-12-31';
    document.getElementById('priority').value = 'NEED';

    getCookie('csrftoken');

    var hiddenField1 = document.createElement("input");
    hiddenField1.setAttribute("type", "hidden");
    hiddenField1.setAttribute("name", 'csrfmiddlewaretoken');
    hiddenField1.setAttribute("value", getCookie('csrftoken'));
    myform.appendChild(hiddenField1);
    myform.submit();
}

Ответ в моей консоли: The response in my console

Вернуться на верх