嘗試使用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> 

Answer 2

如果我理解你，我想你需要先創建一個新的段落元素，然後把你的文字輸入元素段落元素裏面。然後將段落元素附加到#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 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>​