如何显示div表单的列表，因此JavaScript [英] How to display list of div forms consequently javascript
问题描述
确定。所以我正在尝试创建一个表单，以便在按钮+的时候出现一个新窗体。例如我有填表的名称
VoteType
名称：[]
{+} - （按钮）
点击+
时，表格看起来像这样
VoteType
名称：[]
Vote1 name []
image []
date []
{+} - （button）
和按钮+，以便我可以添加Vote2 ...尽可能多的我想要的。
因此，当我尝试对它们进行编号时，这些数字没有按照我的意图去做。
< fieldset id =fieldset>
< form method ='POST'action =''> {％csrf_token％}
< p> {{voteTypeForm}}< / p>
< / form>
< div id =placeholder>
< div id =template>
< p>< fieldset id =fieldsets>
< legend id =legends>候选编号< input type =textid =someInputname =someInputreadonly>< / input>< / legend>
< form method ='POST'action =''> {％csrf_token％}
{{voteForm.as_p}}
< / form>
< / fieldset>< / p>
< / div>
< / div>
< p>< / type =buttonname =Submitonclick =Add（）;> +< / button>< / p>
< input type ='submit'value =create/>
< / fieldset>
< script>
var _counter = 0;
函数Add（）{
_counter ++;
var oClone = document.getElementById（template）。cloneNode（true）;
oClone.id + =（_counter +）;
document.getElementById（placeholder）。appendChild（oClone）;
document.getElementById（someInput）。value = _counter;
}
< / script>
当我点击按钮时，它会创建窗体，但会像这样编号：
4
[空]
1
2
3
代替
<1>
2
3
4
5
我想以某种方式隐藏占位符，使用 stylenone，但比它没有显示任何一个，比我试图激活它只有当计数器超过1，但比再次显示第一个。我通常不使用JavaScript，所以请帮助。如何解决这个问题？
好的，我在这里遇到了几个问题。一个是数字显示不正确，另一个我不希望我的表单没有点击按钮显示[+]。所以我决定在JavaScript中保留我的html代码块。我不知道如何使用该代码将其附加到HTML代码，因为appendchild函数需要节点作为参数而不是字符串。为了解决这个问题，我发现这个 stackoverflow问题。
剩下的是我的解决方案代码：
{％ load staticfiles％}
< link rel =stylesheettype =text / csshref ={％static'Vote / style.css'％}/>
< fieldset id =fieldset>
< form method ='POST'action =''> {％csrf_token％}
< p> {{voteTypeForm}}< / p>
< div id =placeholder>
< / div>
< p>
< button type =buttonname =Submitonclick =Add（）;> +< / button>
< / p>
< input type ='submit'value =create/>
< / form>
< / fieldset>
< script type ='text / javascript'>
{＃document.write（code）;＃}
var _counter = 0;
var template = document.createTextNode（''）;
函数appendStringAsNodes（element，html）
{
var frag = document.createDocumentFragment（），
tmp = document.createElement（'body'），child;
tmp.innerHTML = html;
//将循环中的元素附加到DocumentFragment，以便浏览器执行
//不为每个节点重新呈现文档
while（child = tmp.firstChild）{
frag.appendChild（child）;
}
element.appendChild（frag）; //现在，一次追加所有元素
frag = tmp = null;
}
函数Add（）{
var code ='< div id =template>'+
'< p>'+
' < fieldset id =fieldsets>'+
'< legend id =legends> Candidate No ['+ String（_counter + 1）+']< / legend>'+
'< form method =POSTaction =>'+
'< input type =hiddenname =csrfmiddlewaretokenvalue ={{csrf_token}}/>' +
'< p>< label for =id_name>名称：< / label> < input pid =id_namemaxlength =50name =nametype =text/>< / p>'+
'< p>< label for =id_image >图像：其中/标签> < input id =id_imagename =imagetype =file/>< / p>'+
'< / form>'+
'< / fieldset> '+
'< / p>'+
'< / div>';
_counter ++;
appendStringAsNodes（document.getElementById（placeholder），code）;
document.getElementById（someInput）。value = _counter;
}
< / script>
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.
So I did this form buy when I try to number them, the numbers don't go as I intended.
<fieldset id="fieldset">
<form method = 'POST' action = ''>{%csrf_token %}
<p>{{ voteTypeForm }}</p>
</form>
<div id="placeholder">
<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>
</div>
<p><button type="button" name="Submit" onclick="Add();">+</button></p>
<input type = 'submit' value="create"/>
</fieldset>
<script>
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
document.getElementById("someInput").value = _counter;
}
</script>
When I click button + it creates forms but numbers them like this:
4 [empty] 1 2 3
instead of
1 2 3 4 5
I was trying to somehow hide the placeholder using style "none", but than it didn't show any of them, than I tried to activate it only when counter is more than 1 but than it showed first one again. I don't usually use javascript so please help. How can I solve this?
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 rel="stylesheet" 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>
这篇关于如何显示div表单的列表，因此JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
