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

Question

ok. поэтому я пытаюсь создать форму, так что, когда я на кнопке «+» появляется новая форма под существующей. Например, у меня есть форма для заполнения Name

VoteType 
name: [  ] 
{+} -- (button) 

при нажатии на «+»

форма будет выглядеть следующим образом

VoteType 
name: [  ] 

Vote1 name [  ] 
     image [  ] 
     date [  ] 

{+} -- (button) 

и кнопку «+», так что я могу добавить Vote2. .. сколько угодно.

Я попытался найти способы сделать это и не смог найти решение.

это мой текущий CreateView в views.py:

def create(request): 
    voteTypeForm = VoteTypeForm(request.POST or None) 
    voteForm = VoteType(request.POST or None) 
    clicked = 0 
    instance = voteTypeForm.save(commit=False) 
    instance.pub_date = timezone.now() 
    instance.save() 
    #print instance.pub_date 
    context = RequestContext(request,{ 
      'voteTypeForm': voteTypeForm, 
      'clicked': clicked, 
      'voteForm': voteForm, 
    }) 
    return render(request, 'Vote/create.html', context) 

Я не мог найти, как изменить переменные щелкнул, что в моих взглядах от этого шаблона. как я должен использовать кнопку, чтобы изменить значение клика? или если у вас есть лучшие решения, что я должен сделать для этой проблемы? Мне сказали, что это скорее проблема javascript, чем код django. Так что я редактировал код create.html код JavaScript, добавив: (got the code from here)

<form method = 'POST' action = ''>{%csrf_token %} 
    {{ voteTypeForm }} 
    <input type = 'submit' value="create"/> 
</form> 
<fieldset id="fieldset"> 
    <legend id="legend">Voting Candidates</legend> 
    <div id="placeholder"> 
     <form method = 'POST' action = ''>{%csrf_token %} 
      {{ voteForm }} 
     </form> 
    </div> <!-- placeholder --> 
    <p><button type="button" name="Submit" onclick="Add();">+</button></p> 
</fieldset> 
<script> 
    var _counter = 0; 
    function Add() { 
     _counter++; 
     var oClone = document.getElementById("template").cloneNode(true); 
     oClone.id += (_counter + ""); 
     document.getElementById("placeholder").appendChild(oClone); 
    } 
</script> 

, но этот код не работает. Я очень плохо разбираюсь в javascript, поэтому я не понимаю, что не так в коде. Можете ли вы сказать мне, как исправить этот код?

Answer 1

У меня была аналогичная потребность и в конечном итоге была изменена this underscore.js tutorial.

Другой пользователь объяснил, как они использовали один и тот же учебник, но без использования подчеркивания here.

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

Во всех случаях вам понадобится использовать inlineformset_factory (docs), чтобы вы могли сохранить несколько экземпляров формы.

Answer 2

Здесь было несколько проблем.

Главное, что я написал VoteType в представлениях вместо VoteForm. Это все испортило. После того, как я установил, что у меня возникла проблема с отображением форм с правильным номером и я не хочу сначала отображать в HTML, но хотел, чтобы он хранился где-то в javascript. Для этих проблем я попросил помочь на моем 2nd question. Здесь будет обеспечено полное решение этих проблем.

Для ответа на этот вопрос это будет просто Typo of VoteType и VoteForm.

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