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

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

我会将每个元素包装在 <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>