创建新的民意调查

Question

我正在尝试创建一个按钮来向表单添加文本字段。我有一些问题。首先，当我按下添加选项按钮时，它不会将新文本框放在最后一个选项下面，而是放在它旁边。另外，我不知道如何在文本框之前添加文本“Chocie：”。有帮助吗？这是我的代码。

创建新的民意调查

    <form id="myForm" action="/polls/" method="post">
    {% csrf_token %}
    Question: <input type="text" name="poll"><br />
        <div id="Choices">
          Choice: <input type="text" name="choice1"><br />
          Choice: <input type="text" name="choice2"><br />
          Choice: <input type="text" name="choice3"><br />
          Choice: <input type="text" name="choice4"><br />
          Choice: <input type="text" name="choice5"><br />
        </div>  
        <a href="javascript:addOption();">Add option</a> <br />
        <input type="submit" value="Submit" />
    </form>
    <script> 
        var choiceNumber = 6; //The first option to be added is number 6
        function addOption() { 
                var choices = document.getElementById("Choices"); 
                var newChoice = document.createElement("input"); 
                newChoice.name = "choice"+choiceNumber; 
                newChoice.type = "text";
                choices.appendChild(newChoice); 
                choiceNumber++;
}
    </script>

Answer 1

如果我理解你，我想你首先要创建一个新的段落元素，然后将你的文本和输入元素放在该段落元素中。然后将段落元素附加到#Choices。

编辑：

就个人而言，如果您有换行标记，我会将您的每个选择都放在逻辑段落中。然后javascript将会是这样的：

var newParagraph = document.createElement("p");
var newTextNode = document.createTextNode("Choices: ");
var newInputField = document.createElement("input");
newInputField.setAttribute("type","text");
newParagraph.appendChild(newTextNode);
newParagraph.appendChild(newInputField);
document.getElementById("choices").appendChild(newParagraph);

使用此功能可以实现类似的效果：

var newLineBreak = document.createElement('br');
var newTextNode = document.createTextNode("Choices: ");
var newInputField = document.createElement("input");
newInput.setAttribute("type","text");
document.getElementById("test").appendChild(newLineBreak);
document.getElementById("test").appendChild(newTextNode);
document.getElementById("test").appendChild(newInputField);

在第二个示例中，我创建了类似于上面代码中的换行符。

Answer 2

我会将每个元素包装在<div>中并添加一个可以克隆的隐藏基本元素以生成更多重复元素。每个选项行都包含在<div>中，它们将更易于移植，更容易修改。这是a demonstration of what I mean。

<form id="myForm" action="/polls/" method="post">
Question: <input type="text" name="poll"><br />
    <div id="Choices">
      <div id="blank-choice" style="display: none;">
        Choice: <input type="text" name="choice0">
      </div>
      <div>Choice: <input type="text" name="choice2"></div>
      <div>Choice: <input type="text" name="choice3"></div>
      <div>Choice: <input type="text" name="choice4"></div>
      <div>Choice: <input type="text" name="choice5"></div>
    </div>  
    <a href="#" onClick="return addOption();">Add option</a> </div>
    <input type="submit" value="Submit" />
</form>

<script>
var choiceNumber = 6; //The first option to be added is number 6

function addOption() {
    var choices = document.getElementById("Choices");
    var newChoiceWrapper = document.getElementById("blank-choice").cloneNode(true);
    var newChoice = newChoiceWrapper.getElementsByTagName("input")[0];
    newChoiceWrapper.style.display = 'block';
    newChoice.name = "choice" + choiceNumber;
    choices.appendChild(newChoiceWrapper);
    choiceNumber++;
    return false;
}
document.getElementById('add-option').onclick = addOption;

</script>

Answer 3

我认为你应该将每个选择行放在一个div中，它会更有用，但对于你的例子，你可以这样做，也看jsfiddle page。

   <script> 
        var choiceNumber = 6; //The first option to be added is number 6
        function addOption() { 
                var choices = document.getElementById("Choices"); 
                var newChoice = document.createElement("input"); 
                newChoice.name = "choice"+choiceNumber; 
                newChoice.type = "text";
                choices.innerHTML += "Choice: "
                choices.appendChild(newChoice); 
                choices.appendChild(document.createElement("br"));
                choiceNumber++;
}
    </script>

尝试使用javascript将表单添加到字段

创建新的民意调查

3 个答案: