通过使用javascript单击按钮动态添加Django表单

Question

ok. so I am trying to create a form so that, when I a button "+" a new form appears beneath the existing one. For example I have form to fill name

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

when clicked "+"

the form will look like this

VoteType
name: [        ]

Vote1 name [        ]
      image [        ]
      date [        ]

{+} -- (button)

and the button "+" so that I can add Vote2 ... as many as I want.

I tried to look for the ways to do it and couldn't find any solution.

this is my current createview in 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)

I couldn't find how to change variable clicked that is in my views from this template. how should I use button so that I change clicked value? or if you have better solutions what should I do for this problem? I was told that this is more javascript problem rather than django code. So I edited the code create.html code adding 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>

but this code doesn't work either. I am pretty bad at javascript, so I don't understand whats wrong in the code. Can you tell me how to fix this code?

Answer 1

I had a similar need and ended up modifying this underscore.js tutorial .

Another user explained how they used the same tutorial but without using underscore here .

They're both pretty extensive, so I'm not going to recreate anything here.

In all cases though, you're going to need to use an inlineformset_factory ( docs ) so you can save multiple instances of the form.

Answer 2

There were several problems here.

the main one is that I had written VoteType in views instead of VoteForm. That messed everything up. After fixing that I had problem with displaying the forms with correct number and didn't want to have first for displayed in HTML, but wanted it to be stored somewhere in javascript. For those problems I asked help on my 2nd question . The full code solution to these problems will be provided there.

For the answer of this question, it would be just Typo of VoteType and VoteForm.

I fixed the code add some parts and the solution is like this.