How To Display List Of Div Forms Consequently Javascript

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: [ ] {+} --

Solution 1:

Concerning hiding the template, you can use visibility: hidden to keep the nodes in the DOM so you can select them. Alternatively, if you can use the tag, use that. A last alternative is creating the template in your javascript and keeping the node you want to clone in a variable, instead of keeping it in your DOM.

Haven't figured out yet why the id counter doesn't work properly.

var tmp = document.createElement('div'),
    template;
tmp.innerHTML = '<divid="template"><p><fieldsetid="fieldsets"><legendid="legends">Candidate No <inputtype="text"id="someInput"name="someInput"readonly></input></legend><formmethod = "POST"action = "">{%csrf_token %}{{ voteForm.as_p}}</form></fieldset></p></div>';
template = tmp.innerHTML;

This is the smallest way I could type it. You might have to change the php? asp? code inside the form action though.

Solution 2:

Ok so, I had several issues here. One was that the numbers weren't displaying correctly and another one that I didn't want my form to be shown without clicking button [+]. so I decided to keep my html block of code in javascript. I didn't know how to use that code to append it to html code, because appendchild function required node as an argument and not string. To solve this problem I found this stackoverflow question.

For the rest here is my solution code:

{% load staticfiles %}
<linktype="text/css"href="{% static 'Vote/style.css' %}" /><fieldsetid="fieldset"><formmethod = 'POST'action = ''>{%csrf_token %}
        <p>{{ voteTypeForm }}</p><divid="placeholder"></div><p><buttontype="button"name="Submit"onclick="Add();">+</button></p><inputtype = 'submit'value="create"/></form></fieldset><scripttype='text/javascript'>
{#    document.write(code);#}
    var _counter = 0;
    var template = document.createTextNode('');
    function appendStringAsNodes(element, html)
    {
        var frag = document.createDocumentFragment(),
            tmp = document.createElement('body'), child;
        tmp.innerHTML = html;
        // Append elements in a loop to a DocumentFragment, so that the browser does
        // not re-render the document for each node
        while (child = tmp.firstChild) {
            frag.appendChild(child);
        }
        element.appendChild(frag); // Now, append all elements at once
        frag = tmp = null;
    }
    function Add() {
        var code = '<divid="template">' +
                '<p>' +
                    '<fieldsetid="fieldsets">' +
                        '<legendid="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
                       ' <formmethod = "POST"action = "">'+
                              '<inputtype="hidden"name="csrfmiddlewaretoken"value="{{csrf_token }}" />' +
                            '<p><labelfor="id_name">Name:</label><inputid="id_name"maxlength="50"name="name"type="text" /></p>'+
                            '<p><labelfor="id_image">Image:</label><inputid="id_image"name="image"type="file" /></p>'+
                        '</form>' +
                   ' </fieldset>' +
                '</p>' +
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>