add django forms dynamically by clicking button using javascript

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?

I think you have mixed up server-side logic with client-side logic. What is this: `{% if clicked == 1%}`? — Wtower, Jul 03 '15 at 09:25
that was my logic before I was going to use javascript. I left it there because I was originally thinking this could be done without javascript and just using django. ({% if clicked == 1%}) -is django code and is not now in current code. — GreedyAi, Jul 03 '15 at 09:27

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

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.

edited May 23 '17 at 10:26

Community

1
1

answered Jul 03 '15 at 11:56

onyeka

1,517
13
18

thx for help! check my second question if you are interested in my solution. – GreedyAi Jul 06 '15 at 09:43
changed answer to yours :D cause still changing my previous solution to formsets. hoped wouldn't need to use them, but things got pretty annoying. – GreedyAi Jul 08 '15 at 09:00

score 0 · Answer 2 · edited May 23 '17 at 12:06

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.

add django forms dynamically by clicking button using javascript

2 Answers2