Django динамическая форма не работает с первым POST

Question

Я пытаюсь использовать формы для динамического создания полей формы в Django.Теперь наборы форм сохраняют значения в базах данных, если я использую form.as_p для публикации значений (даже с несколькими формами).Но при использовании настраиваемых полей форма перезагружается, сообщая о недопустимых или обязательных полях, даже если я их заполнил.Но значения сохраняются, если я записываю значения во вторую форму (после ее перезагрузки), когда она публикуется, я старался изо всех сил искать ответы, но ни один из них не помог.

javascript
$(document).ready(function() {
  // Code adapted from http://djangosnippets.org/snippets/1389/
  function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+-)');
    var replacement = prefix + '-' + ndx + '-';
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex,
 replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
  }
  function deleteForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    if (formCount > 1) {
      // Delete the item/form
      $(btn).parents('.item').remove();
      var forms = $('.item'); // Get all the forms
      // Update the total number of forms (1 less than before)
      $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
      var i = 0;
      // Go through the forms and set their indices, names and IDs
      for (formCount = forms.length; i < formCount; i++) {
        $(forms.get(i)).children().children().each(function() {
          updateElementIndex(this, prefix, i);
        });
      }
    } // End if
    else {
        alert("You have to enter at least one todo item!");
    }
    return false;
  }
  function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    // You can only submit a maximum of 10 todo items
    if (formCount < 10) {
      // Clone a form (without event handlers) from the first form
      var row = $(".item:first").clone(false).get(0);
      // Insert it after the last form
      $(row).removeAttr('id').hide().insertAfter(".item:last").slideDown(300);

      // Remove the bits we don't want in the new row/form
      // e.g. error messages
      $(".errorlist", row).remove();
      $(row).children().removeClass('error');

      // Relabel/rename all the relevant bits
      $(row).children().children().each(function() {
        updateElementIndex(this, prefix, formCount);
        if ( $(this).attr('type') == 'text' )
          $(this).val('');
      });

      // Add an event handler for the delete item/form link
      $(row).find('.delete').click(function() {
        return deleteForm(this, prefix);
      });
      // Update the total form count
      $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    } // End if
    else {
      alert("Sorry, you can only enter a maximum of ten items.");
    }
    return false;
  }
  // Register the click event handlers
  $("#add").click(function() {
    return addForm(this, 'form');
  });

  $(".delete").click(function() {
    return deleteForm(this, 'form');
  });
});

html
{{ordercart_form.management_form}}   <!--formset order cart form-->
        {% for order in ordercart_form.forms %}
        <div class="item">


        <table class="order_table_class add_order_form">         <!--add_order_form to modify height-->

            <tr>
                <td>{{order.as_p}}<td>

                <th><label class="form_label">{{ order.width.label }}</label> </th>
                <th><label class="form_label">{{ order.height.label }}</label> </th>
                <th><label class="form_label">{{ order.quantity.label }}</label> </th>
                <th><label class="form_label">{{ order.frame.label}}</label> </th>
                <th><label class="form_label">{{ order.roomtype.label}}</label> </th>
                <th><label class="form_label">{{ order.price.label}}</label> </th>
            </tr>
        </table>


        <table class="order_table_class add_order_form">         <!--add_order_form to modify height-->

            <tr>

                <td>{{order.width | add_class:"form_fields_table" |attr:"placeholder:ft"|attr:"min:0"}}</td>
                <td>{{order.height | add_class:"form_fields_table"|attr:"placeholder:ft"|attr:"min:0"}}</td>
                <td>{{order.quantity | add_class:"form_fields_table" |attr:"placeholder:no. items"|attr:"min:0"}}</td>
                <td>{{order.frame | add_class:"form_fields_table"}}</td>
                <td>{{order.roomtype | add_class:"form_fields_table"}}</td>
                <td>{{order.price | add_class:"form_fields_table" |attr:"placeholder:2000.00"|attr:"min:0"}}</td>
                <td><a class="delete" href="#">Delete</a></td>
            </tr>
                    </table>
            </div>
            {%endfor%}
                    <p><a id="add" href="#">Add another item</a></p>

        <input class="submit_button" value=" Submit" type="submit">