Generate multiple html inputs with javascript

Question

I have a form which the user will write a number (int) he wants, and then there's a button besides this textbox that must read the value written on the input and create the exact numbers of textboxes which the user had written in a modal .

This is what I've been trying so far, but I can't get any kind of result.

<input id="my_input" name="test1"  type="text" value="" >

<button data-toggle="modal" data-target="#myModal" onclick="add_input()" id="add_input1"  name="" type="submit">GO</button>

 <script>
function add_inputs()
{
    n = $('#my_input').val();
    console.log(n);

    for (var i = 1; i < n; i++);
        console.log(i);

    $("#rolonum_" + i).html('<span>Item 1</span><input id="rolo_add' + i + '" name="addposition"  type="text" value="" required/>');
}

</script>

Answer 1

Try This

  function add_inputs() { n = $('#my_input').val(); $("#rolonum").html(''); for (var i = 1; i <= n; i++) { $("#rolonum").append('<span>Item ' + i + ' </span><input id="rolo_add' + i + '" name="addposition" type="text" value="" required/><br>'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="my_input" name="test1" type="text" value=""> <button data-toggle="modal" data-target="#myModal" onclick="add_inputs()" id="add_input1" name="" type="button">GO</button> <div id="rolonum"> </div> 

Answer 2

You have a few things wrong there. You have to have a place to put the elements when you generate them. Also fixed a couple mismatched selectors (your onclick function name didn't match the actual function name), and replaced the inline onclick with something more appropriate. Try this...

 var btn = $("#add_input1"); btn.on('click',function() { var n = $("#my_input").val(); console.log(n); for (var i = 1; i <= n; i++) { $("#inputs").append('<span>Item '+i+'</span><input id="rolo_add'+i+'" name="addposition" type="text" value="" required/><br/>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="my_input" name="test1" type="text" value="" > <button data-toggle="modal" data-target="#myModal" id="add_input1" name="" type="submit">GO</button> <div id="inputs"></div> 

Answer 3

Problems with your code:

1. You have defined the JS function as "add_inputs" but have tied onclick function to "add_input" (note the missing "s").

2. In the function "add_inputs" you have put a semicolon just after the "for" clause, effectively making it useless because there is no code to execute for the iterations of the loop

3. You need to place your dynamically generated input-boxes somewhere on the DOM. These could be inside the body or some other element. You have tried to insert them in an element with an id ("#rolonum_" + i), which is wrong because such an element DOES NOT exist.

The correct code would be:

 function add_inputboxes() { n = $('#my_input').val(); if (n < 1) alert("ERROR: Enter a positive number"); else { $("#rolonum").html(''); for (var i = 1; i <= n; i++) { $("#rolonum").append('<p><span>Item ' + i + ' </span><input id="rolo_add' + i + '" name="addposition" type="text" value="" required/></p>'); } } } //Yet Another way to do the same thing jQuery('#add_input2').click(add_inputboxes); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="my_input" name="test1" type="text" value=""> <button data-toggle="modal" data-target="#myModal" id="add_input1" name="" type="button" onclick="add_inputboxes()">GO</button> <!-- Yet Another button to do the same thing --> <button data-toggle="modal" data-target="#myModal" id="add_input2" name="" type="button">Create Inputs</button> <p>The Buttons go in #rolonum :</p> <div id="rolonum"></div> 

Answer 4

This:

        for(var i = 1; i < n; i++);

It's a useless statement. The ; at the end basically says "This is a loop that does nothing". The loop will run, it'll increment i , but at the end, that's ALL it does. There's no body, so you're not executing anything but the i++ .

Maybe you wanted something more like

for (...) {
   console.log(i);
   $('#rolonum_"+i).etc....
}

instead.

Answer 5

You have set type="submit" which will submit the page and your function will not be called. Change type to button like type="button"

<button data-toggle="modal" data-target="#myModal" onclick="add_input()" id="add_input1"  name="" type="button">GO</button>

Also modify your function as pointed by Marc B

Answer 6

Try this :

$(document).ready(function(){

    $("#add_input1").on("click",function(){

        n = $('#my_input').val();

        for(var i = 1; i <=n; i++) {

            $("body").append('<span>Item'+ i + ' : </span><input id=rolo_add'+i+' name=addposition type=text value="" required/><br>');

        }
    })
})

Final code :

  <!DOCTYPE html> <html> <head> </head> <body> <input id="my_input" name="test1" type="text" value="" > <button data-toggle="modal" data-target="#myModal" id="add_input1" name="" type="submit">GO</button> <br><br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#add_input1").on("click",function(){ n = $('#my_input').val(); for(var i = 1; i <=n; i++) { $("body").append('<span>Item'+ i + ' : </span><input id=rolo_add'+i+' name=addposition type=text value="" required/><br>'); } console.log(i-1); }) }) </script> </body> </html>