For for creating fields

1

I'm trying to make when the user enters a certain number in a <input> is created the same amount of fields, I tried to do it in a way that I found here, but I could not get it to create the number of fields I type, just create a label, nor the input appears, follow below the code:

<div class="form-group" id="vem">
</div>
<input type="number" class="form-control round-input" name="numero_parc" required="required" min="1" id="par">

$(document).ready(function() {
  var max_fields = 10; 
  var wrapper = $("#vem"); 
  var add_button = $("#par");

  $(add_button).change(function(e) { 
  e.preventDefault();
  var length = wrapper.find("input:text#textAdded").length;

  $(wrapper).append('<label class="col-sm-2 col-sm-2 control-label">' + (length+1) +'</label><div class="col-md-5"><input type="date" class="form-control round-input" id="textAdded" name="num' + (length+1) + '"></div>');
  });
}); 

for:

function criaCampos(){
            var qtd = document.getElementById('par').value;            
            if (qtd > 1) {
              for(var i=0; i < qtd; i++){
                document.getElementById('vem').innerHTML = '<label class="col-sm-2 col-sm-2 control-label">1º</label><div class="col-md-5"><input type="date" class="form-control round-input" name="'+ qtd[i]+'"></div>';
              }
            }
          }
    
asked by anonymous 08.06.2017 / 21:20

1 answer

0

I tried to create an example for you of how it can be done. I used jQuery , okay?

In HTML, I made it very simple:

<input type="number" id="quantidade" value="0" />

<div id="campos">
</div>

And here is the code jQuery :

$(document).ready(function(){

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

      var quantidade = $('#quantidade').val(),
          campos = $('#campos');

      campos.html(''); //aqui eu fiz limpar a div
      for (x = 0; x < quantidade; x++) {
        campos.append('<input type="text" id="campo-'+x+'" />');
      }

    });

});

DEMO

    
08.06.2017 / 21:55