Попытайтесь добавить формы в поле, используя 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>, они будут более переносимыми и более легко изменяемыми.Вот демонстрация того, что я имею в виду .

<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.

Edit:

Лично, если у вас есть теги для разрывов строк, я бы вместо этого выбрал каждый из ваших вариантов в логическом абзаце. И тогда 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>​