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>

n is a string right now

depperm
– depperm

2016-08-30 16:13:46 +00:00
Commented Aug 30, 2016 at 16:13 — depperm
– depperm, Commented Aug 30, 2016 at 16:13

Karthikeyan Vedi · Accepted Answer · 2016-08-30 16:23:46Z

4

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>

answered Aug 30, 2016 at 16:23

Karthikeyan Vedi

1,3601 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shariq Hasan Khan · Accepted Answer · 2016-08-30 17:34:45Z

Problems with your code:

You have defined the JS function as "add_inputs" but have tied onclick function to "add_input" (note the missing "s").
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
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>

Robert Wade · Accepted Answer · 2016-08-30 16:22:31Z

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>

Marc B · Accepted Answer · 2016-08-30 16:13:41Z

1

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.

answered Aug 30, 2016 at 16:13

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2016-08-30 16:15:01Z

1

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

answered Aug 30, 2016 at 16:15

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Comments

Ehsan · Accepted Answer · 2016-08-30 16:48:33Z

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>

Collectives™ on Stack Overflow

Generate multiple html inputs with javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related