Categories
forms html javascript

Dynamically creating a specific number of input form elements

112

I’ve read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.

My HTML Code:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

So, a user will enter an integer value (I’m checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.

I’m not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.

0

    176

    You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():

    If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.

    Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.

    Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.

    <html>
    <head>
        <script type="text/javascript">
            function addFields(){
                // Generate a dynamic number of inputs
                var number = document.getElementById("member").value;
                // Get the element where the inputs will be added to
                var container = document.getElementById("container");
                // Remove every children it had before
                while (container.hasChildNodes()) {
                    container.removeChild(container.lastChild);
                }
                for (i=0;i<number;i++){
                    // Append a node with a random text
                    container.appendChild(document.createTextNode("Member " + (i+1)));
                    // Create an <input> element, set its type and name attributes
                    var input = document.createElement("input");
                    input.type = "text";
                    input.name = "member" + i;
                    container.appendChild(input);
                    // Append a line break 
                    container.appendChild(document.createElement("br"));
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
        <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
        <div id="container"/>
    </body>
    </html>

    See a working sample in this JSFiddle.

    9

    • I followed your advice. But when I click on, the browser console shows this error: Uncaught TypeError: Cannot call method 'appendChild' of undefined

      – xan

      Feb 13, 2013 at 12:55

    • The answer so much helpful. And how can I add a CSS class to the field

      Jul 13, 2017 at 7:14

    • 4

      @Pravin Glad it helped, see How do I add a class to a given element?. Basically use input.className += ' someCSSClass';

      Jul 13, 2017 at 8:10


    • 1

      When I submit the form, the new fields generated dynamically are not submitted like the other fields that were part of the original HTML. They show up visually and I can inspect them but they don’t submit. Any ideas why that would happen?

      – circle1

      Jul 27, 2018 at 15:45


    • 1

      @circle1 Make sure the dynamically generated elements do have a unique name attribute. Only form elements with a name attribute will have their values passed when submitting a form.

      Jul 27, 2018 at 19:06

    50

    Try this JQuery code to dynamically include form, field, and delete/remove behavior:

    $(document).ready(function() {
        var max_fields = 10;
        var wrapper = $(".container1");
        var add_button = $(".add_form_field");
    
        var x = 1;
        $(add_button).click(function(e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
            } else {
                alert('You Reached the limits')
            }
        });
    
        $(wrapper).on("click", ".delete", function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container1">
        <button class="add_form_field">Add New Field &nbsp; 
          <span style="font-size:16px; font-weight:bold;">+ </span>
        </button>
        <div><input type="text" name="mytext[]"></div>
    </div>

    6

    • Maybe I’m doing something wrong, but in my case any pressing enter in a text field in this form will lead to the ‘Add New Field’ button’s function being fired, which is probably unwanted behavior…

      – Maxi Mus

      Sep 8, 2020 at 21:10

    • 2

      <button type="button" ...> and the problem is solved.

      – Maxi Mus

      Sep 8, 2020 at 21:18


    • Hello! When I go to save the data of the dynamic inputs, how do I recover them all?

      Feb 18, 2021 at 15:43

    • Good answer. plus+. BUT… vanilla javascript ?? Some people dislike adding libraries.

      Jun 5 at 19:35

    • @M. Lak let’s suppose we increase the input element by 1 on each click event and these fields values are submitted with form how can we retrieve each input field values can you please update the answer so that each input field will have dynamic (unique) id or name attr

      Aug 19 at 12:42