1

Gostaria de saber como faço para criar campos de input de acordo com o valor que eu adicionar em um campo.

Ex: tenho um campo do tipo number que possui um valor mínimo de 1 o valor máximo de 4 e o valor default é 1:

<input type="number" min="1" max="4" value="1" />

Como o valor default do campo é 1 ja deve ser criado um campo input, mas caso o usuário mude esse valor para 3 devem ser criados mais 2 campos totalizando 3 campos.

5
  • Pode esperar pelo evento change nesse input de tipo numérico. Com base no value dele, pode fazer um loop para criar os demais inputs. Commented 19/04/2015 às 14:19
  • Onde se adicionam os outros inputs? Qual o tipo de input? O primeiro já vem adicionado quando a página carrega ou é criado via JavaScript?
    – Sergio
    Commented 19/04/2015 às 15:14
  • @Sergio O primeiro input já vem criado, os outros inputs vão ser criados na mesma página e no mesmo form e serão do tipo text.
    – Dark Media
    Commented 19/04/2015 às 15:45
  • @DarkMedia ok, e como é o HTML do primeiro input? tem alguma classe particular para poder encontrá-lo no DOM?
    – Sergio
    Commented 19/04/2015 às 15:48
  • @Sergio A principio não há nenhuma classe para encontra-lo mas não há problema em adicionar uma. o HTML do primeiro input atualmente é assim: <input type="text" class="form-control" id="ncamisa" name="ncamisa" placeholder="Tamanho da(s) camisa">
    – Dark Media
    Commented 19/04/2015 às 15:51

1 Resposta 1

2

Precisas de um oscultador de evento no input que indica a quantidade de inputs, e quando esse valor mudar podes verificar quantos inputs existem. Sugiro mudares name="ncamisa" para name="ncamisa[]" para o PHP poder ler esses inputs na mesma array.

Sugiro ainda dar um ID a esse input type="numbver" para poderes encontra-lo mais facilmente.

$('#numeros').on('change', function () {
    var nr = parseInt(this.value, 10);
    var inputs = $('[name="ncamisa[]"]');
    var dif = inputs.length - nr;

    if (dif < 0) {
        var input = inputs.eq(0).clone().attr('id', '');
        while (dif++ < 0) $(document.body).append(input)
    } else if (dif > 0) {
        inputs.each(function (i) {
            if (i >= nr) this.remove();
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="numeros" type="number" min="1" max="4" value="1" />
<input type="text" class="form-control" id="ncamisa" name="ncamisa[]" placeholder="Tamanho da(s) camisa">

Exemplo: http://jsfiddle.net/29mb5zv1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .