Attempt adding forms to field using javascript

Question

I'm trying to create a a button to add a text field to a form. I am having a few issues. First, when I press the add choice button, it doesn't put the new text box under the last choice, but rather next to it. Also, I don't know how to add the text "Chocie:" before the text box. Any help? Here's my code.

Create a new Poll

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

Trey Hunner · Accepted Answer · 2012-02-17 02:08:23Z

I would wrap each element in a <div> and add a hidden base element that can be cloned to produce more duplicate elements. With each choice row wrapped in a <div> they will be more portable and more easily modifiable. Here is 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>

score 1 · Accepted Answer · 2012-02-17 02:11:07Z

1

If I understand you, I think you want to create a new paragraph element first and then put your text and input element inside that paragraph element. Then append the paragraph element to #Choices.

Edit:

Personally, where you have tags for line breaks, I would instead have each of your choices in a logical paragraph. And then the javascript would go something like this:

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);

A similar effect could be achieved by using this:

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);

In the second example, I have created line breaks similar to what you did in your code above.

edited Feb 17, 2012 at 2:11

answered Feb 17, 2012 at 1:52

user1052335

1 Comment

daniel langer Over a year ago

what am i putting in the paragraph element?

Okan Kocyigit · Accepted Answer · 2012-02-17 02:15:29Z

0

I think you should put each choice line in a div, it will be more useful, but for your example you can do that like this, also look 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>

edited Feb 17, 2012 at 2:15

answered Feb 17, 2012 at 2:00

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Collectives™ on Stack Overflow

Attempt adding forms to field using javascript

Create a new Poll

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Create a new Poll

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related