Adding additional DIV input based on user input in jQuery

Question

I'm creating function where user will insert number of value. And additional div of input will appear based the number of value of user have input previous div.

example

Insert number of user : `2`

Additional input based on number of user input

name :
name :

If user put 3 there will be 3 name and if user change it into 2 there will be 2 name.

How do I fix it in order to achieve the example that I want.

     $('#user').hide();
        $("#user_num").change(function()
        {
            $("#user").remove();
            let m = $(this).val();
                for (var i = 0; i < parseInt(m); i++){
                  $('#user').show();
              
                }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="info">
    <div class="col-lg-12 mb-30">
        <label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br>
            <div class="input-group-prepend">
                <input class="from-control" type="number" placeholder="2" id="user_num" required >
            </div>
    </div>
                                                                 
    <div class="col-lg-12 mb-30" id="user">
        <label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br>
            <div class="input-group-prepend">
                <input class="from-control" type="text" id="name" required >
            </div>
    </div>

</div>

Gass · Accepted Answer · 2021-08-30 08:39:31Z

1

You where close to achieve it with your attempt. You needed to implement an event handler that executes a function when the input field value is changed. You can achieve this with .on('change', function(){ // do something })

Every time the function is executed it clears the html inside <div id="inputs-container"></div> and the loop appends html code to that div n times.

Try the following snippet

$('#in').on('change', function(){

  let n = $(this).val()
  let html_code = 'name: <input value="" style="margin-top:5px"><br>'; 

  $('#inputs-container').html('');

  for (var i = 0; i < n; i++){
         $('#inputs-container').append(html_code);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="info" style="margin:10px">
    
  Insert number of users: <input id="in" value="" /> 
  
  <div id="inputs-container" style="margin-top:20px"> 
  </div>

</div>

Note: I updated the jQuery CDN to the latest one. You where using an older version.

edited Aug 30, 2021 at 8:39

answered Aug 30, 2021 at 7:35

Gass

9,6405 gold badges47 silver badges53 bronze badges

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

3 Comments

nonutt Over a year ago

would it be possible to do it without a button ? Taking example like this one ? link

Gass Over a year ago

yes, instead of using on('click') use on('change') ... I changed the snippet, try it out

Gass Over a year ago

Your welcome. Always use the latest version of jQuery, this is very important. You where using a version really old and lots of method don't work.

Collectives™ on Stack Overflow

Adding additional DIV input based on user input in jQuery

1 Answer 1

Try the following snippet

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Try the following snippet

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related