Hey there! I'm currently working on a form where I want a new form to appear below the existing one when I click the "+" button. Let's say I have a form for entering a name:
VoteType
name: [ ]
{+} -- (button)
Once I click "+", the form should expand like this:
VoteType
name: [ ]
Vote1 name [ ]
image [ ]
date [ ]
{+} -- (button)
I would like to keep adding more "Votes" by clicking the "+" button as many times as needed.
I've been searching for solutions to implement this but haven't found the right one yet.
This is the current 'createview' in my '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()
context = RequestContext(request,{
'voteTypeForm': voteTypeForm,
'clicked': clicked,
'voteForm': voteForm,
})
return render(request, 'Vote/create.html', context)
I am struggling with changing the value of 'clicked' variable in my views from the template. How can I use the button to update the 'clicked' value? If you have any better ideas or solutions, please feel free to share. I was advised that this might be more of a javascript issue rather than a Django one. So, I tried to modify the 'create.html' code by adding some javascript (source: 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>
<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>
However, even this code doesn't seem to work for me. Since I'm not very familiar with javascript, I'm having trouble identifying the issue. Can you provide some guidance on how to fix this code?