Динамическое добавление и удаление полей на шаблоне django

Question

Новичок, я застрял в проблеме, и я чувствую, что это больше связано с тем, что я слишком много читаю, прежде чем пытаться это сделать. И теперь, когда я пытаюсь, это меня путает. Надеясь, что вы сможете потратить некоторое время на помощь.

Вот что я пытаюсь сделать.

Я хотел бы динамически добавлять поля формы модели в HTML. Итак, для ex; пользователь пытается добавить шаги к рецепту, он может добавить несколько шагов и может даже удалить некоторые из этих шагов. Я хочу, чтобы это происходило динамически на отображаемой странице.

Я хотел бы начать с очень простого примера.

У меня есть готовый набор форм и моделей в django docs. Кроме того, прошли многие ответы SO. Существует много случаев, когда эти поля добавляются без использования форм.

Я попробовал это сам с несколькими примерами, но я думаю, что я смешиваю все, что я прочитал.

Кроме того, мой js не настолько силен, но я использовал его для примеров, которые я попробовал, они, похоже, не работают, но они меньше моих забот.

Вот код, который я пытался от одного из ответов на SO:

views.py

def myview(request): 
if request.method == 'POST': 
    form = MyForm(request.POST, extra=request.POST.get('extra_field_count')) 
    if form.is_valid(): 
     print "valid!" 
else: 
    form = MyForm() 
return render(request, "test/test.html", { 'form': form }) 

forms.py

class MyForm(forms.Form): 
    original_field = forms.CharField() 
    extra_field_count = forms.CharField(widget=forms.HiddenInput()) 

    def __init__(self, *args, **kwargs): 
     extra_fields = kwargs.pop('extra', 0) 

     super(MyForm, self).__init__(*args, **kwargs) 
     self.fields['extra_field_count'].initial = extra_fields 

     for index in range(int(extra_fields)): 
      # generate extra fields in the number specified via extra_fields 
      self.fields['extra_field_{index}'.format(index=index)] = \ 
      forms.CharField() 

шаблон

{% extends 'base.html' %} 
<script> 
{% block jquery %} 
    form_count = $("[name=extra_field_count"); 
    // get extra form count so we know what index to use for the next item. 
    $("#add-another").click(function() { 
     element = $('<input type="text"/>'); 
     element.attr('name', 'extra_field_' + form_count); 
     $("#forms").append(element); 
     // build element and append it to our forms container 

     form_count ++; 
     $("[name=extra_field_count]").val(form_count); 
     // increment form count so our view knows to populate 
     // that many fields for validation 
    }) 
{% endblock %} 
</script> 

{% block content %} 
<form method="POST">{% csrf_token %} 
<div id="forms"> 
    {{ form.as_p }} 
</div> 
<button id="add-another">add another</button> 
<input type="submit" /> 
</form> 

{% endblock %} 

Ну, это не удалось. Когда я нажимаю «Добавить другое поле», страница перезагружается и дает эту ошибку значения «неверный литерал для int() с базой 10:« NaN ». Во всяком случае, я не знаю, подходит ли это для меня. немного запутался, я бы получил это с помощью набора форм для ModelForm.

Answer 1

Вы назначаете строку в form_count:

form_count = $("[name=extra_field_count"); 

и пытается увеличить его.

form_count ++; 

попробуйте вместо этого:

form_count = parseInt($("#id_extra_field_count").val(),10);