1

Boas

tenho o seguinte código que adiciona inputs conform o numero de inserido num caixa de texto, no entanto caso o formulário já tenha algumas caixas de texto eu apenas quero que adicione a diferença, ou seja

caixa de texto inicio : 2

Após alteração: caixa de texto alterada - 3

neste momento como tenho está adicoonar 3 ao que já existe,

Segue o código que tenho no momento

$(document).ready(function() {
var $txtQuantidade = $('#txtQuantidade');
var $btnAdicionar = $('#btnAdicionar');
var $divForm = $('#divForm');

$btnAdicionar.on('click', function() {
    var qtde = $txtQuantidade.val();
    console.log(qtde);
    var html = '';

    for (var i = 0; i < qtde; i++) {
        html += '<div>';
        html += '<input type="date" id="txtData_' + i + '" name="data[]">';
        html += '<input type="time" id="txtHoraIni_' + i + '"   name="hinicio[]">'
        html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
        html += '<div>';
    }

    $divForm.append(html);
});
});

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>

Vou tentar explicar melhor:

Imaginemos que eu tenho 2 na caixa de texto, apenas me poderá aparecer dois inputs, caso eu insira de seguida 3 apenas me poderá mostrar 3 inputs e por fim caso eu volte a colocar 2 apenas me poderia mostrar 2 inputs apagando um

obrigado

4
  • caso tenha interesse, segue o seu código sem jQuery: JSFiddle Commented 9/12/2015 às 14:18
  • Obrigado pela ajuda, mas não é bem isso, o que controla o numero de inputs é o valor da caixa de texto, ou seja, se estiver dois mesmo que eu clique ele apenas vai manter 2 caixas de texto, se eu inserir 3 vai apenas adiconar mais uma. e caso eu depois escreva 2 ele apenas vai ficar com dois, não sei se deu para entender :/ Commented 9/12/2015 às 14:21
  • 1
    pronto, alterei o código para o que deseja: JSFiddle Commented 9/12/2015 às 14:34
  • ey, muito obrigado, perfeito Commented 9/12/2015 às 14:36

3 Respostas 3

2

Segue uma implementação que não faz uso de manipulação de strings e mantem a integridade dos índices.

var txtQuantidade = document.getElementById("txtQuantidade");
var btnAdicionar = document.getElementById("btnAdicionar");
var divForm = document.getElementById("divForm");
var tmplLinha = document.getElementById("tmplLinha").content;

btnAdicionar.addEventListener("click", function () {
  var quantidade = {};
  quantidade.old = parseInt(divForm.dataset.qtd) || 0;
  quantidade.new = parseInt(txtQuantidade.value) || 0;

  //adicionar novas linhas
  if (quantidade.new > quantidade.old) {
    for (var indice = quantidade.old; indice < quantidade.new; indice++) {
      var linha = document.importNode(tmplLinha, true);
      var inputs = linha.querySelectorAll("input[id]");

      [].forEach.call(inputs, function (input){    
        input.id = input.id + indice;
      });
      divForm.appendChild(linha);
    }
  } 

  //remover linhas excedentes
  if (quantidade.new < quantidade.old) {
    var linhas = [].slice.call(divForm.children, quantidade.new);
    linhas.forEach(function (linha, indice) {
      divForm.removeChild(linha);    
    });
  }

  divForm.dataset.qtd = quantidade.new;
});
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm" data-qtd="0">

</div>
<template id="tmplLinha">
  <div>
    <input type="date" id="txtData_" name="data[]">
    <input type="time" id="txtHoraIni_" name="hinicio[]">
    <input type="time" id="txtHoraFim_" name="hfim[]">
  </div>
</template>

2

Nesse caso, meu amigo, você terá que mudar a lógica do seu for.

Você precisa que a variável i tenha o valor "estático". Ou seja, a variável i vai ter sempre o último valor inserido. E a quantidade será somada a quantidade desejada.

$btnAdicionar.on('click', function() {

    // Define o número atual ou 0
    var numero = $(this).data('numero') || 0;

    // Precisamos do parseInt para somar os valores

    var qtde = parseInt($txtQuantidade.val());

    for (var i = numero; i < qtde + numero; i++) {
        html += '<div>';
        html += '<input type="date" id="txtData_' + i + '" name="data[]">';
        html += '<input type="time" id="txtHoraIni_' + i + '"   name="hinicio[]">'
        html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
        html += '</div>';
    }

    $divForm.append(html);

    // O último numero gerado
    $(this).data('numero', i);
});

Assim a lógica ficará assim

var i = ultimo_numero_inserido

quantidade + ultimo_numero_inserido

Então teríamos algo como:

usuário Pediu pra inserir 10

for ( i = 0; i < 10; i++);

Depois pediu pra inserir mais 5

for ( i = 10; i < 15; i++);
3
  • faltou só você incrementar o numero antes de atualizar ele no dataset: $(this).data('numero', qtde + numero); Commented 9/12/2015 às 14:02
  • É verdade @TobyMosque. Na verdade a intenção era colocar o i e não o numero Commented 9/12/2015 às 14:05
  • 1
    sempre esqueço que o i ainda está disponível fora do for. Commented 9/12/2015 às 14:09
1

Sem fazer muitas modificações em seu código, uma alternativa para fazer o que precisa é buscando a quantidade de filhos que a #divForm possui e subtrair a quantidade informada no txtQuantidade, desta forma.

var qtde = $txtQuantidade.val() - $divForm.children().length;.

Ficará assim:

$(document).ready(function() {
  var $txtQuantidade = $('#txtQuantidade');
  var $btnAdicionar = $('#btnAdicionar');
  var $divForm = $('#divForm');

  $btnAdicionar.on('click', function() {
    var qtde;
    if($txtQuantidade.val() <= $divForm.children().length) {
      for(i = 0; i < $txtQuantidade.val(); i++) {
        $divForm.children().last().remove();
      }
    } else {
      qtde = $txtQuantidade.val() - $divForm.children().length;

      console.log(qtde);
      var html = '';

      for (var i = 0; i < qtde; i++) {
        html += '<div>';
        html += '<input type="date" id="txtData_' + i + '" name="data[]">';
        html += '<input type="time" id="txtHoraIni_' + i + '"   name="hinicio[]">'
        html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
        html += '</div>';
      }

      $divForm.append(html);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>

2
  • essa ta quase perfeita, mas necessitava que caso eu diminua o numero também diminua o numero de inputs :/ Commented 9/12/2015 às 14:30
  • @LaranjaMecânica Alterei conforme disse. Commented 9/12/2015 às 15:24

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 .