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 = '<div id="template"><p><fieldset id="fieldsets"><legend id="legends">Candidate No <input type="text" id="someInput" name="someInput" readonly></input></legend><form method = "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 %}
<link  type="text/css" href="{% static 'Vote/style.css' %}" />
<fieldset id="fieldset">
    <form method = 'POST' action = ''>{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
        <div id="placeholder">

        </div>
        <p>
            <button type="button" name="Submit" onclick="Add();">+</button>
        </p>
        <input type = 'submit' value="create"/>
    </form>
</fieldset>
<script type='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 = '<div id="template">' +
                '<p>' +
                    '<fieldset id="fieldsets">' +
                        '<legend id="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
                       ' <form method = "POST" action = "">'+
                              '<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token }}" />' +
                            '<p><label for="id_name">Name:</label> <input id="id_name" maxlength="50" name="name" type="text" /></p>'+
                            '<p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file" /></p>'+
                        '</form>' +
                   ' </fieldset>' +
                '</p>' +
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>