MattDAVM MattDAVM - 3 months ago 7
HTML Question

Generate multiple html inputs with javascript

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

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>

Comments