Add new created label and input-text to form using dom Javascript?

Question

I have three fields that will be filled by the user. one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed

<head>
    <script>
      function myFunction(){
        var x = document.createElement("LABEL");
        var t = document.createTextNode("Titre");
        x.appendChild(t);
      }
    </script>
</head>

<body>
    <form id="myForm" method="POST" action="./exam_coordinates">
        <label for="question"> Question </label> <br>
        <input class="champ" type="textarea" name="question" id="question" value=""><br><br>
        <label for="ans"> Answers </label> <br>
        <input type="checkbox" name="ans1" id="ans1" values="" />
        <input type="text" name="ans1" id="ans1" value=""><br>
        <input type="checkbox" name="ans2" id="ans2" />
        <input type="text" name="ans2" id="ans2" value=""><br>
        <br>
        <button onclick="myFunction()">Add proposition</button> <br><br><br>
        <input type="submit" value="submit">
    </form>
</body>

[This](https://www.codexworld.com/add-remove-input-fields-group-dynamically-jquery/) may help — Tushar Walzade, Feb 22 '19 at 14:06
[Similar](https://stackoverflow.com/a/42293411/5729813), using jQuery — Tushar Walzade, Feb 22 '19 at 14:21

Ashvin777 · Answer 1 · 2019-02-22T18:15:20.313

In your function, you have to append your label as well in its parent. Like below -

function myFunction() {
    var form = document.getElementById("myForm");
    var input = document.createElement("input");
      

    form.appendChild(input)
}

<form id="myForm" method="POST" action="./exam_coordinates">
    <label for="question"> Question </label> <br>
    <input class="champ" type="textarea" name="question" id="question" value=""><br><br>

    <label for="ans"> Answers </label> <br>

    <input type="checkbox" name="ans1" id="ans1" values="" />
    <input type="text" name="ans1" id="ans1" value=""><br>

    <input type="checkbox" name="ans2" id="ans2" />
    <input type="text" name="ans2" id="ans2" value=""><br>
    <br>

    <button type="button" onclick="myFunction()">Add proposition</button> <br><br>

    <input type="submit" value="submit">
</form>

If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -

function myFunction() {
  let wrapper = document.getElementById("dynamic-fields");
  var input = document.createElement("input");
  wrapper.appendChild(input)
}

<form>
    <!-- ...input fields... -->
    <div id="dynamic-fields"></div> <br>
    <!-- ...buttons.... -->
    <button type="button" onclick="myFunction()">Add proposition</button>
</form>

This way it will put those dynamically generated elements on specific place in your form page.

Try this - https://jsitor.com/IO08f-WBx

well, that adds the label. what about the input type="text" ? I've asked about it too it would have another manner of manner of append — , Feb 22 '19 at 18:06

score 0 · Accepted Answer · answered Feb 22 '19 at 14:45

If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -

var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
    e.preventDefault();
    var lastID = $("#myForm input[type=text]:last").attr("id");
    var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
    $(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" />&nbsp;<input type="text" name="ans${nextId}" id="ans${nextId}" value=""/><a href="#" class="delete">Delete</a><div>`);
});

$(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <form id="myForm" method="POST" action="./exam_coordinates">
        <label for="question"> Question </label> <br>
        <input class="champ" type="textarea" name="question" id="question" value=""><br><br>
        <label for="ans"> Answers </label> <br>
        <input type="checkbox" name="ans1" id="ans1" values="" />
        <input type="text" name="ans1" id="ans1" value=""><br>
        <input type="checkbox" name="ans2" id="ans2" />
        <input type="text" name="ans2" id="ans2" value=""><br>
        <div id="more_answers"></div>
        <br>
        <button id="add_button">Add proposition</button> <br><br><br>
        <input type="submit" value="submit">
    </form>
</body>

Great @Tushar, this is it! I ran the snippet and it showed the intended result. But where I'm going to put the first block of code you've wrote in my own page, in order to be called when the user click on the button. (take into consideration I'm new to javascript) — , Feb 22 '19 at 17:57
You can add it either in the js file which is accessible in the related HTML or in the `` tag right in the HTML — Tushar Walzade, Feb 22 '19 at 18:28

Add new created label and input-text to form using dom Javascript?

2 Answers2