create input text with loop js










0














I would like to know how could I create many <input type=text /> tags with a loop in JS.



I need that loop to be linked to a first input (type=number), which tell to the loops how many input text to create.






function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>












share|improve this question























  • No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
    – Peter van der Wal
    Nov 11 at 11:57










  • – AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
    – HynekS
    Nov 11 at 12:05










  • These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
    – KhroNoSS
    Nov 11 at 12:12















0














I would like to know how could I create many <input type=text /> tags with a loop in JS.



I need that loop to be linked to a first input (type=number), which tell to the loops how many input text to create.






function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>












share|improve this question























  • No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
    – Peter van der Wal
    Nov 11 at 11:57










  • – AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
    – HynekS
    Nov 11 at 12:05










  • These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
    – KhroNoSS
    Nov 11 at 12:12













0












0








0







I would like to know how could I create many <input type=text /> tags with a loop in JS.



I need that loop to be linked to a first input (type=number), which tell to the loops how many input text to create.






function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>












share|improve this question















I would like to know how could I create many <input type=text /> tags with a loop in JS.



I need that loop to be linked to a first input (type=number), which tell to the loops how many input text to create.






function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>








function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>





function getP () 
var nbP = Number(document.getElementById("nombreP").value);

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>






javascript html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 12:45









Foo

1




1










asked Nov 11 at 11:46









KhroNoSS

33




33











  • No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
    – Peter van der Wal
    Nov 11 at 11:57










  • – AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
    – HynekS
    Nov 11 at 12:05










  • These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
    – KhroNoSS
    Nov 11 at 12:12
















  • No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
    – Peter van der Wal
    Nov 11 at 11:57










  • – AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
    – HynekS
    Nov 11 at 12:05










  • These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
    – KhroNoSS
    Nov 11 at 12:12















No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
– Peter van der Wal
Nov 11 at 11:57




No need to say sorry! Everyone has to learn at one point. What exactly do you want to do with these inputs, should they be in one form or do you want multiple forms?
– Peter van der Wal
Nov 11 at 11:57












– AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
– HynekS
Nov 11 at 12:05




– AFAIK you can not create element using bracket notation ike this, you probably need to create inputin the first place and then set type attribute, – More important you can not add inputs with a submit button, you need another button or somethin like that, – Your loop condition shoul probably be <= rather than < (if you use < and the value is 5, you got only 4 inputs), But in general your are following a good path, just keep trying.
– HynekS
Nov 11 at 12:05












These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
– KhroNoSS
Nov 11 at 12:12




These inputs would stock 2-3 words that will be use next to create an url. Exemple : xxxx.tk:port/NumberOfInput=<nbP>&plat0=<input text 1>&plat1=<input text 2>&plat2=input text3...
– KhroNoSS
Nov 11 at 12:12












4 Answers
4






active

oldest

votes


















0














Direct answer to your question:



<script type="text/javascript">
function getP()
var nbP = +document.getElementById("nombreP").value;
var inputContainer = document.getElementById("inutContainer");

for (var i = 0; i < nbP; i++)
var newForm = document.createElement("input");
newForm.setAttribute("type", "text");
newForm.setAttribute("id", "form"+i);
inputContainer.appendChild(newForm);
inputContainer.appendChild(document.createElement("br"));


</script>
<form>
<input type="number" name="nombrePlat" id="nombreP">
<input type="button" value="Envoyer" id="ok" onclick="getP()">
<div id="inutContainer">
</div>
</form>


BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:



https://reactjs.org/ or https://angular.io/ or https://vuejs.org/






share|improve this answer




















  • Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
    – KhroNoSS
    Nov 11 at 13:03










  • sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
    – Sergey Shulik
    Nov 11 at 13:06


















0














I hope it helps:






document.querySelector('#ok').addEventListener('click', getP)

function getP(event)
let inputsQtt = document.querySelector('input[type=number]').value
for (let i = 0; i < inputsQtt; i++)
let input = document.createElement("input");
document.body.appendChild(input);


<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="button" value="Envoyer" id="ok">
</form>








share|improve this answer




























    0














    There are few problems with your code
    First: syntax error, you are missing 1 curly bracket } to close function.



    And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.



    And also you can not use "input[type=text]" to create element.You can just create an element with following code



    function getP () 
    var nbP = Number(document.getElementById("nombreP").value);
    for (var i = 0; i < nbP; i++)
    var newForm = document.createElement("input");
    newForm.id = "form"+i;
    newForm.setAttribute("type","text");
    document.body.appendChild(newForm);







    share|improve this answer




























      0














      Here's a slightly different approach, that involves adding a wrapper container within your form.






      function updateForm() 

      var parent = document.getElementById('inputs'),
      count = document.getElementById('inputCount').value

      <form method="get" name="inputForm">
      <input min="0" type="number" name="inputCount" id="inputCount">

      <div id="inputs">
      <!-- container for dynamic inputs -->
      </div>

      </form>

      <!-- Notice inputs can also be associated to form with `form` attribute -->
      <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">








      share|improve this answer






















        Your Answer






        StackExchange.ifUsing("editor", function ()
        StackExchange.using("externalEditor", function ()
        StackExchange.using("snippets", function ()
        StackExchange.snippets.init();
        );
        );
        , "code-snippets");

        StackExchange.ready(function()
        var channelOptions =
        tags: "".split(" "),
        id: "1"
        ;
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function()
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled)
        StackExchange.using("snippets", function()
        createEditor();
        );

        else
        createEditor();

        );

        function createEditor()
        StackExchange.prepareEditor(
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader:
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        ,
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248425%2fcreate-input-text-with-loop-js%23new-answer', 'question_page');

        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        Direct answer to your question:



        <script type="text/javascript">
        function getP()
        var nbP = +document.getElementById("nombreP").value;
        var inputContainer = document.getElementById("inutContainer");

        for (var i = 0; i < nbP; i++)
        var newForm = document.createElement("input");
        newForm.setAttribute("type", "text");
        newForm.setAttribute("id", "form"+i);
        inputContainer.appendChild(newForm);
        inputContainer.appendChild(document.createElement("br"));


        </script>
        <form>
        <input type="number" name="nombrePlat" id="nombreP">
        <input type="button" value="Envoyer" id="ok" onclick="getP()">
        <div id="inutContainer">
        </div>
        </form>


        BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:



        https://reactjs.org/ or https://angular.io/ or https://vuejs.org/






        share|improve this answer




















        • Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
          – KhroNoSS
          Nov 11 at 13:03










        • sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
          – Sergey Shulik
          Nov 11 at 13:06















        0














        Direct answer to your question:



        <script type="text/javascript">
        function getP()
        var nbP = +document.getElementById("nombreP").value;
        var inputContainer = document.getElementById("inutContainer");

        for (var i = 0; i < nbP; i++)
        var newForm = document.createElement("input");
        newForm.setAttribute("type", "text");
        newForm.setAttribute("id", "form"+i);
        inputContainer.appendChild(newForm);
        inputContainer.appendChild(document.createElement("br"));


        </script>
        <form>
        <input type="number" name="nombrePlat" id="nombreP">
        <input type="button" value="Envoyer" id="ok" onclick="getP()">
        <div id="inutContainer">
        </div>
        </form>


        BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:



        https://reactjs.org/ or https://angular.io/ or https://vuejs.org/






        share|improve this answer




















        • Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
          – KhroNoSS
          Nov 11 at 13:03










        • sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
          – Sergey Shulik
          Nov 11 at 13:06













        0












        0








        0






        Direct answer to your question:



        <script type="text/javascript">
        function getP()
        var nbP = +document.getElementById("nombreP").value;
        var inputContainer = document.getElementById("inutContainer");

        for (var i = 0; i < nbP; i++)
        var newForm = document.createElement("input");
        newForm.setAttribute("type", "text");
        newForm.setAttribute("id", "form"+i);
        inputContainer.appendChild(newForm);
        inputContainer.appendChild(document.createElement("br"));


        </script>
        <form>
        <input type="number" name="nombrePlat" id="nombreP">
        <input type="button" value="Envoyer" id="ok" onclick="getP()">
        <div id="inutContainer">
        </div>
        </form>


        BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:



        https://reactjs.org/ or https://angular.io/ or https://vuejs.org/






        share|improve this answer












        Direct answer to your question:



        <script type="text/javascript">
        function getP()
        var nbP = +document.getElementById("nombreP").value;
        var inputContainer = document.getElementById("inutContainer");

        for (var i = 0; i < nbP; i++)
        var newForm = document.createElement("input");
        newForm.setAttribute("type", "text");
        newForm.setAttribute("id", "form"+i);
        inputContainer.appendChild(newForm);
        inputContainer.appendChild(document.createElement("br"));


        </script>
        <form>
        <input type="number" name="nombrePlat" id="nombreP">
        <input type="button" value="Envoyer" id="ok" onclick="getP()">
        <div id="inutContainer">
        </div>
        </form>


        BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:



        https://reactjs.org/ or https://angular.io/ or https://vuejs.org/







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 11 at 12:10









        Sergey Shulik

        678824




        678824











        • Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
          – KhroNoSS
          Nov 11 at 13:03










        • sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
          – Sergey Shulik
          Nov 11 at 13:06
















        • Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
          – KhroNoSS
          Nov 11 at 13:03










        • sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
          – Sergey Shulik
          Nov 11 at 13:06















        Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
        – KhroNoSS
        Nov 11 at 13:03




        Thanks ! But I suppose I need to know well JS before start learning React (for example) ?
        – KhroNoSS
        Nov 11 at 13:03












        sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
        – Sergey Shulik
        Nov 11 at 13:06




        sure, that why i wrote that it's good question to learn, but bad example to prod implementation =)
        – Sergey Shulik
        Nov 11 at 13:06













        0














        I hope it helps:






        document.querySelector('#ok').addEventListener('click', getP)

        function getP(event)
        let inputsQtt = document.querySelector('input[type=number]').value
        for (let i = 0; i < inputsQtt; i++)
        let input = document.createElement("input");
        document.body.appendChild(input);


        <form method="get">
        <input type="number" name="nombrePlat" id="nombreP">
        <input type="button" value="Envoyer" id="ok">
        </form>








        share|improve this answer

























          0














          I hope it helps:






          document.querySelector('#ok').addEventListener('click', getP)

          function getP(event)
          let inputsQtt = document.querySelector('input[type=number]').value
          for (let i = 0; i < inputsQtt; i++)
          let input = document.createElement("input");
          document.body.appendChild(input);


          <form method="get">
          <input type="number" name="nombrePlat" id="nombreP">
          <input type="button" value="Envoyer" id="ok">
          </form>








          share|improve this answer























            0












            0








            0






            I hope it helps:






            document.querySelector('#ok').addEventListener('click', getP)

            function getP(event)
            let inputsQtt = document.querySelector('input[type=number]').value
            for (let i = 0; i < inputsQtt; i++)
            let input = document.createElement("input");
            document.body.appendChild(input);


            <form method="get">
            <input type="number" name="nombrePlat" id="nombreP">
            <input type="button" value="Envoyer" id="ok">
            </form>








            share|improve this answer












            I hope it helps:






            document.querySelector('#ok').addEventListener('click', getP)

            function getP(event)
            let inputsQtt = document.querySelector('input[type=number]').value
            for (let i = 0; i < inputsQtt; i++)
            let input = document.createElement("input");
            document.body.appendChild(input);


            <form method="get">
            <input type="number" name="nombrePlat" id="nombreP">
            <input type="button" value="Envoyer" id="ok">
            </form>








            document.querySelector('#ok').addEventListener('click', getP)

            function getP(event)
            let inputsQtt = document.querySelector('input[type=number]').value
            for (let i = 0; i < inputsQtt; i++)
            let input = document.createElement("input");
            document.body.appendChild(input);


            <form method="get">
            <input type="number" name="nombrePlat" id="nombreP">
            <input type="button" value="Envoyer" id="ok">
            </form>





            document.querySelector('#ok').addEventListener('click', getP)

            function getP(event)
            let inputsQtt = document.querySelector('input[type=number]').value
            for (let i = 0; i < inputsQtt; i++)
            let input = document.createElement("input");
            document.body.appendChild(input);


            <form method="get">
            <input type="number" name="nombrePlat" id="nombreP">
            <input type="button" value="Envoyer" id="ok">
            </form>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 11 at 12:12









            Smollet777

            1,3461015




            1,3461015





















                0














                There are few problems with your code
                First: syntax error, you are missing 1 curly bracket } to close function.



                And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.



                And also you can not use "input[type=text]" to create element.You can just create an element with following code



                function getP () 
                var nbP = Number(document.getElementById("nombreP").value);
                for (var i = 0; i < nbP; i++)
                var newForm = document.createElement("input");
                newForm.id = "form"+i;
                newForm.setAttribute("type","text");
                document.body.appendChild(newForm);







                share|improve this answer

























                  0














                  There are few problems with your code
                  First: syntax error, you are missing 1 curly bracket } to close function.



                  And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.



                  And also you can not use "input[type=text]" to create element.You can just create an element with following code



                  function getP () 
                  var nbP = Number(document.getElementById("nombreP").value);
                  for (var i = 0; i < nbP; i++)
                  var newForm = document.createElement("input");
                  newForm.id = "form"+i;
                  newForm.setAttribute("type","text");
                  document.body.appendChild(newForm);







                  share|improve this answer























                    0












                    0








                    0






                    There are few problems with your code
                    First: syntax error, you are missing 1 curly bracket } to close function.



                    And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.



                    And also you can not use "input[type=text]" to create element.You can just create an element with following code



                    function getP () 
                    var nbP = Number(document.getElementById("nombreP").value);
                    for (var i = 0; i < nbP; i++)
                    var newForm = document.createElement("input");
                    newForm.id = "form"+i;
                    newForm.setAttribute("type","text");
                    document.body.appendChild(newForm);







                    share|improve this answer












                    There are few problems with your code
                    First: syntax error, you are missing 1 curly bracket } to close function.



                    And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.



                    And also you can not use "input[type=text]" to create element.You can just create an element with following code



                    function getP () 
                    var nbP = Number(document.getElementById("nombreP").value);
                    for (var i = 0; i < nbP; i++)
                    var newForm = document.createElement("input");
                    newForm.id = "form"+i;
                    newForm.setAttribute("type","text");
                    document.body.appendChild(newForm);








                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 11 at 12:13









                    Ninad

                    916




                    916





















                        0














                        Here's a slightly different approach, that involves adding a wrapper container within your form.






                        function updateForm() 

                        var parent = document.getElementById('inputs'),
                        count = document.getElementById('inputCount').value

                        <form method="get" name="inputForm">
                        <input min="0" type="number" name="inputCount" id="inputCount">

                        <div id="inputs">
                        <!-- container for dynamic inputs -->
                        </div>

                        </form>

                        <!-- Notice inputs can also be associated to form with `form` attribute -->
                        <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">








                        share|improve this answer



























                          0














                          Here's a slightly different approach, that involves adding a wrapper container within your form.






                          function updateForm() 

                          var parent = document.getElementById('inputs'),
                          count = document.getElementById('inputCount').value

                          <form method="get" name="inputForm">
                          <input min="0" type="number" name="inputCount" id="inputCount">

                          <div id="inputs">
                          <!-- container for dynamic inputs -->
                          </div>

                          </form>

                          <!-- Notice inputs can also be associated to form with `form` attribute -->
                          <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">








                          share|improve this answer

























                            0












                            0








                            0






                            Here's a slightly different approach, that involves adding a wrapper container within your form.






                            function updateForm() 

                            var parent = document.getElementById('inputs'),
                            count = document.getElementById('inputCount').value

                            <form method="get" name="inputForm">
                            <input min="0" type="number" name="inputCount" id="inputCount">

                            <div id="inputs">
                            <!-- container for dynamic inputs -->
                            </div>

                            </form>

                            <!-- Notice inputs can also be associated to form with `form` attribute -->
                            <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">








                            share|improve this answer














                            Here's a slightly different approach, that involves adding a wrapper container within your form.






                            function updateForm() 

                            var parent = document.getElementById('inputs'),
                            count = document.getElementById('inputCount').value

                            <form method="get" name="inputForm">
                            <input min="0" type="number" name="inputCount" id="inputCount">

                            <div id="inputs">
                            <!-- container for dynamic inputs -->
                            </div>

                            </form>

                            <!-- Notice inputs can also be associated to form with `form` attribute -->
                            <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">








                            function updateForm() 

                            var parent = document.getElementById('inputs'),
                            count = document.getElementById('inputCount').value

                            <form method="get" name="inputForm">
                            <input min="0" type="number" name="inputCount" id="inputCount">

                            <div id="inputs">
                            <!-- container for dynamic inputs -->
                            </div>

                            </form>

                            <!-- Notice inputs can also be associated to form with `form` attribute -->
                            <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">





                            function updateForm() 

                            var parent = document.getElementById('inputs'),
                            count = document.getElementById('inputCount').value

                            <form method="get" name="inputForm">
                            <input min="0" type="number" name="inputCount" id="inputCount">

                            <div id="inputs">
                            <!-- container for dynamic inputs -->
                            </div>

                            </form>

                            <!-- Notice inputs can also be associated to form with `form` attribute -->
                            <input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 11 at 12:33

























                            answered Nov 11 at 12:27









                            Todd

                            4,46322138




                            4,46322138



























                                draft saved

                                draft discarded
















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function ()
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248425%2fcreate-input-text-with-loop-js%23new-answer', 'question_page');

                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                                Syphilis

                                Darth Vader #20