Django: добавить динамический набор форм с помощью кнопки - PullRequest
Новая
       42

Django: добавить динамический набор форм с помощью кнопки

0 голосов
/ 16 октября 2018

Я ищу ручку Django formsets.Я хотел бы отобразить первую форму в своем formset и иметь возможность добавлять несколько форм, когда я нажимаю на кнопку добавления.

До сих пор я отображал свой набор форм с помощью extra=4, но я хотел быустановить extra=1 и добавить дополнительные, когда я нажимаю кнопку new form.

В моем шаблоне у меня есть: 

{% block main %}

  <h2>{{title}}</h2>

  <div class="row publication-create">

    <form method="post" action="" enctype="multipart/form-data" novalidate class="col-md-8 col-md-offset-2">
      {% csrf_token %}
        <fieldset>
          <legend class="title"><span class="name">{% trans 'Publication form' %}</span></legend>
            {{ form|crispy }}
        </fieldset>
        <fieldset>
          <legend class="title"><span class="name">{% trans 'Document form' %}</span></legend>
          <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseDocument" aria-expanded="false" aria-controls="collapseDocument">
            {% trans 'Add document(s)' %}
          </button>
          <div class="collapse" id="collapseDocument">
            <div class="card card-body">
            {{ document_form|crispy }}
            </div>
          </div>
        </fieldset>
      <br>
      <input type="submit" class="btn btn-default" value="{% trans 'Save' %}" />
      <a href="{{request.META.HTTP_REFERER}}" class="btn btn-default">{% trans 'Cancel' %}</a>
    </form>
  </div>

{% endblock main %}

В моем файле forms.py у меня есть: 

DocumentFormSet = inlineformset_factory(Publication, Document, form=DocumentForm, extra=1)

И мой взгляд выглядит следующим образом: 

class PublicationCreateView(EdqmCreateView):
    """ Create publication with document form through formset """
    model = Publication
    template_name = 'publication_form.html'

    def get_context_data(self, **kwargs):
        context = super(PublicationCreateView, self).get_context_data(**kwargs)
        context['document_form'] = DocumentFormSet(self.request.POST or None, self.request.FILES or None)
        return context

    def form_valid(self, form):
        context = self.get_context_data()
        document = context['document_form']
        if document.is_valid():
            self.object = form.save()
            document.instance = self.object
            document.save()
        return super(PublicationCreateView, self).form_valid(form)

    def get_success_url(self):
        return reverse('publication-list-crud')

Результат:

С моим кодом я добавил кнопку, но эта кнопка отображает 4формы одновременно.Я хотел бы показать это один за другим.Я думаю, что мне нужен код Javascript?

Спасибо!

Я прочитал этот пост: Динамическое добавление формы в набор форм Django с помощью Ajax Но я не преодолелВоспроизведите пример с моим сценарием.

1 Ответ

0 голосов
/ 16 октября 2018

Так как вам нужно только максимум 4 формы, вы можете скрыть 3 из них, используя javascript, затем постепенно показывать их по мере нажатия пользователем кнопки.

Пример: 

var forms = [
    document.getElementById("form1");
    document.getElementById("form2");
    document.getElementById("form3");
    document.getElementById("form4");
]
var addButton = document.getElementById("addButton");
for(var i = 0 ; i < 3 ; i++){
    forms[i+1].style.display = "none";
}
var actForm = 1;

addButton.onclick = function(){
    if(actForm < 4){
        forms[actForm].style.display = 'block';
        actForm++;
    }
}

Вы все равноМне нужно выяснить идентификаторы форм, взглянуть на созданный html, я знаю, что django добавляет некоторые в определенный шаблон.

Однако это не «хорошее» решение, поскольку оно очень специфично.Один очень хороший способ сделать это может иметь конечную точку ajax, которая возвращает соответствующий HTML в зависимости от индекса формы.

...