CODEWITHSUNDEEP
javascripthtmldjango
daniel langer
daniel langer

Reputation: 1975

Attempt adding forms to field using javascript

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>

Upvotes: 0

Views: 121

Answers (3)

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

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

Upvotes: 0

user1052335
user1052335

Reputation:

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.

Upvotes: 1

Trey Hunner
Trey Hunner

Reputation: 11814

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>

Upvotes: 1

Related Questions