Django formset management_form null значение для id_form-TOTAL_FORMS

У меня есть форма с фабрикой inlineformset_factory. При нажатии на кнопку добавления дополнительных форм я получаю ошибку Uncaught TypeError: totalForms is null $addFormset http://localhost:8000/static/js/site-js.js:21

строка 21 файла site-js.js totalForms.setAttribute('value', '${formsetNum + 1}'); // Increment the Number of Total Forms in the Management Form Data

Я вижу, что client_formset.management_form создает следующие 4 скрытых поля ввода в моей форме.

<input type="hidden" name="client_set-TOTAL_FORMS" value="1" id="id_client_set-TOTAL_FORMS">
<input type="hidden" name="client_set-INITIAL_FORMS" value="0" id="id_client_set-INITIAL_FORMS">
<input type="hidden" name="client_set-MIN_NUM_FORMS" value="0" id="id_client_set-MIN_NUM_FORMS">
<input type="hidden" name="client_set-MAX_NUM_FORMS" value="1000" id="id_client_set-MAX_NUM_FORMS">

когда я регистрирую totalForms, я получаю нулевое значение вместо значения для id_client_set-TOTAL_FORMS.

index.html

{% load static %}

<!DOCTYPE html>
<html>
<body>
  
  {% block body_content %}
  
      <form method="post" id="form">
          {% csrf_token %}
  
          {{ construction_form }}
  
          {% if client_formset %}
              <h3>Clients</h3>
  
              {{ client_formset.non_form_errors }}
              {{ client_formset.management_form }}
  
              {% for form in client_formset %}
                  <div class="formset-container {{ client_formset.prefix }}">
                      <div class="first-name">{{ form.first_name.label }}: {{ form.first_name }}</div>
                      <div class="last-name">{{ form.last_name.label }}: {{ form.last_name }}</div>
  
                      {% if client_formset.can_delete %}
                          <div class="delete">{{ form.DELETE }} {{ form.DELETE.label }}</div>
                      {% endif %}
                  </div>
              {% endfor %}
          {% endif %}
  
          <button id="add-formset" type="button">Add Another</button>
  
          <input type="submit" value="Save">
      </form>
  {% endblock %}
  <script type="text/javascript" src="{% static 'js/site-js.js' %}"></script>

</body>
</html>

site-js.js

let formsetContainer = document.querySelectorAll('.formset-container'),
form = document.querySelector('#form'),
addFormsetButton = document.querySelector('#add-formset'),
totalForms = document.querySelector('#id_form-TOTAL_FORMS'),
formsetNum = formsetContainer.length - 1; // Returns the Number of the Last Form on the Page, where index starts at zero

console.log(totalForms);

addFormsetButton.addEventListener('click', $addFormset);

function $addFormset(e) {
e.preventDefault();

let newForm = formsetContainer[0].cloneNode(true), // Clone the formsetContainer
    formRegex = RegExp(`form-(\\d){1}-`,'g'); // Regex to find all instances of form-{{ # }} in the string of all internal HTML

formsetNum++ // Increment the Form Number
newForm.innerHTML = newForm.innerHTML.replace(formRegex, 'form-${formsetNum}-'); // Update the new Form to have the Correct Form Number in the string of internal HTML, such as name or class attributes
form.insertBefore(newForm, addFormsetButton); // Insert the new form at the end of the list of forms, just before the add new form button

totalForms.setAttribute('value', '${formsetNum + 1}'); // Increment the Number of Total Forms in the Management Form Data
}
Вернуться на верх