Динамически отображаемые входные данные не попадают в пост-запрос?

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

// Clear previous fields
                    dynamicFieldsContainer.innerHTML = '';

                    // Inject fields dynamically
                    for (const [key, value] of Object.entries(data.fields)) {
                        // Skip fields that are null or undefined
                        if (value === null || value === undefined) continue;

                        const field = `
                            <div class="mb-3">
                                <label for="${key}" class="form-label">${key.replace('_', ' ').toUpperCase()}</label>
                                <input type="text" class="form-control" id="${key}" name="${key}" value="${value}" required>
                            </div>`;
                        dynamicFieldsContainer.insertAdjacentHTML('beforeend', field);
                    }

Это скрытые поля, которые уже присутствуют на форме и заполняются JS-скриптом, это единственные поля, присутствующие в POST-запросе

                // Set hidden ID field
                document.getElementById('expense-id').value = data.id;
                // Set hidden expense-type field
                document.getElementById('expense-type').value = data.type;

Текущая html-структура, которая показывает форму и действие поста, а также скрытые и динамически отображаемые html-теги

 <form id="editExpenseForm" name="editExpenseForm" method="post" action="{% url 'edit_expense' %}">
                                        {% csrf_token %}
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="editExpenseModalLabel">Edit Expense</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <input type="hidden" name="expense-id" id="expense-id">
                                            <input type="hidden" name="expense-type" id="expense-type">
                                            <div id="dynamic-fields">
                                                <!-- Fields will be injected dynamically -->
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </form>

Ваш код javascript просто нужно немного подправить. Он должен выглядеть примерно так:

    // your previous code
    const formData = new FormData(form);
    const searchParams = new URLSearchParams();
    for (let [key, value] of formData.entries()) {
      searchParams.append(key.toString(), value.toString());
    }
    
    fetch(form.action, {
      method: 'POST',
      body: searchParams.toString(),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    // your other code

Я только что проверил у себя, это должно работать, request.POST теперь должен содержать данные формы. Проверьте и дайте мне знать, работает ли это у вас?

p.s. Я не использовал ваш update_expense код контроллера.

ОБНОВЛЕНО

На всякий случай добавляю то, на что я проверял: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form action="{% url 'foo_bar' %}" method="POST" id="my-form">
  {% csrf_token %}
  <div class="modal-body">
    <input type="hidden" name="expense-id" id="expense-id">
    <input type="hidden" name="expense-type" id="expense-type">
    <div id="dynamic-fields"></div>
    <button type="submit">CLICK ME</button>
  </div>
</form>

<script>
  const element = document.querySelector('#dynamic-fields');
  for (const [key, value] of Object.entries({ field1: 1 })) {
    // Skip fields that are null or undefined
    if (value === null || value === undefined) continue;

    const field = `
      <div class="mb-3">
        <label for="${key}" class="form-label">${key.replace('_', ' ').toUpperCase()}</label>
        <input type="text" class="form-control" id="${key}" name="${key}" value="${value}" required>
      </div>`;
    element.insertAdjacentHTML('beforeend', field);
  }

  const form = document.querySelector('#my-form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const formData = new FormData(form);
    const searchParams = new URLSearchParams();
    for (let [key, value] of formData.entries()) {
      searchParams.append(key, value.toString());
    }

    fetch(form.action, {
      method: 'POST',
      body: searchParams.toString(),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
  })
</script>
</body>
</html>

#  views

def spam(request):
    return render(request=request, template_name='test.html')

Консольный вывод request.body и request.POST: console_output

// Решение ответа.

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