For for field creation

Asked

Viewed 51 times

1

I’m trying to get when the user enters a certain number in a <input> be created the same amount of fields, I tried to do in a way I found here, but I could not make it create the number of fields I type, only creates a label, nor the input appears, follows 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>';
              }
            }
          }
javascript html

  • You forgot to close the input div

  • It still doesn’t work

  • Yes, there are other problems. The loop itself is missing

  • Just try add_button.change(Function(){ ... });

  • Yeah, I don’t know how to build this loop, or if there was a way through this code to create the number of fields the user chooses.

  • Pro loop you can use "for". Read this: https://www.w3schools.com/js/js_loop_for.asp

  • I tried to do a for the way I entered the question now, but it didn’t work. So I found this second code, which sounded better, but it still doesn’t work the way I need it

  • document.getElementById('vem').innerHTML += ...

  • What is going wrong is when, for example, I type 3 for the number of fields, but then the for creates two and stops, and still the second is created only the label, without input

  • https://jsfiddle.net/ht6qgd83/

Show 5 more comments

1 answer

0


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

In HTML I made it very simple:

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

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

And here’s 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

  • Thank you, I adjusted some things according to what I need and worked perfectly!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.