Máscara com input dinâmico

[sergionpinheiro 0]

Bom dia galera, estou com a seguinte questão:

Tenho um formulário que insere o campo telefone dinamicamente. O primeiro funciona perfeitamente com a máscara, porém a partir do segundo, a máscara não funciona mais.

Segue o código da máscara:

<script type="text/javascript">

  function mascara(o,f) {
    v_obj = o
    v_fun = f
    setTimeout("execmascara()",1)
  }
  function execmascara() {
    v_obj.value = v_fun(v_obj.value)
  }
  function mtel(v) {
    v = v.replace(/\D/g,"");
    v = v.replace(/^(\d{2})(\d)/g,"($1) $2");
    v = v.replace(/(\d)(\d{4})$/,"$1-$2");
    return v;
  }
  function id(el) {
  return document.getElementById(el);
  }
  window.onload = function() {
    id('telefone').onkeyup = function() {
      mascara(this, mtel);
    }
  }
</script>

Segue o código do campo extra:

<script type="text/javascript">
  $(function() {

    $("#add_phone").click(function() {
      var input = '<div class="control-group">';
      input += ' <label class="col-sm-3 control-label">Telefone:</label>';
      input += ' <div class="col-sm-4"><input name="telefone[]" type="text" autocomplete="off" class="form-control telefone" id="telefone" placeholder="Telefone" maxlength="15" rel="popover" data-content="Digitar somente números" data-title="Dicas" data-placement="top" required></div>';
      input += ' <a href="#descricao" class="btn btn-danger del_row"><span class="glyphicon glyphicon-remove"></span>  Excluir</a></div><br>';

        $("#fones").append(input);
        return false;

    });

    $('.del_row').live('click', function() {
      $(this).parent().remove();
    });

  });

</script>

Segue o código do input:

<div class="control-group rows-inputs">
   <label class="col-sm-3 control-label">Telefone:</label>
   <div class="col-sm-4">
      <input name="telefone[]" type="text" autocomplete="off" class="form-control telefone" id="telefone" placeholder="Telefone" maxlength="15" rel="popover" data-content="Digitar somente números" data-title="Dicas" data-placement="top" required>
   </div>
   <a href="telefone" id="add_phone" class="btn btn-warning" rel="tooltip" data-placement="top" data-original-title="Inserir linha"><span class="glyphicon glyphicon-plus-sign"></span>  Telefone</a>
</div>
<div id="fones"></div>

Desde já agradeço a ajuda de vocês.

Valeu.

[sergionpinheiro 0]

Bom dia pessoal, alguma ideia?

[kelvim 11]

Ideia - https://igorescobar.github.io/jQuery-Mask-Plugin/

No seu código você está repetindo o mesmo ID para todos os campos, o atributo ID deve ser unico, no html não dá erro, mas no JS não aceita bem, costuma dar erro mesmo, verifique isso.

[sergionpinheiro 0]

Estava lendo pela net que é preciso declarar novamente, uma vez que a página carrega, ele traz a função, a partir do momento que eu adiciono um input dinâmico, ele perde aquela função inicial, pois a página já foi carregada. Como faço para recarregar esta função nos inputs dinâmicos?

[kelvim 11]

Não entendi bem o que você quis dizer, mas seguindo o que eu tinha falado,

usando o maskedinput (plugin jquery) tem o seguinte exemplo que fiz para você https://fiddle.jshell.net/8rgf35qh/

Obs:

- O id é único, não pode existir mais de um com o mesmo nome.

- A chamada deve ser através do atributo class, isso por que o class pode ter quantos você quiser na página.

- Sempre que add um campo chama a função mask novamente.

- Tendo uma função tão boa, pronta como essa mask, acho desnecessário recriar a roda criando a mascara por conta propria.

[sergionpinheiro 0]

Obrigado Kelvim, essa parte eu compreendi, a dificuldade que estou tendo é adaptar esse código acima para chamar esta função novamente. Você tem como me dar uma luz com relação ao código acima?

Obrigado.

[kelvim 11]

a dificuldade que estou tendo é adaptar esse código acima para chamar esta função novamente. Você tem como me dar uma luz com relação ao código acima?

Não entendi, como assim chamar novamente a função? para outros tipos de campos?

[sergionpinheiro 0]

Tipo assim, além desse campo, tenho outro fomulário que é autocomplete, ou seja, conforme eu digito no input, ele vai lá no banco de dados e traz o resultado que estou digitando. Nesse formulário estou tendo o mesmo problema dos telefones. Essa função funciona para o primeiro input, que já vem carregado na página. Porém, se eu adicionar dinamicamente mais um campo, ele perde esta função de consultar o banco conforme eu digito. Queria saber como eu chamo esta função que o primeiro input possui.

[kelvim 11]

Tipo assim, além desse campo, tenho outro fomulário que é autocomplete, ou seja, conforme eu digito no input, ele vai lá no banco de dados e traz o resultado que estou digitando. Nesse formulário estou tendo o mesmo problema dos telefones. Essa função funciona para o primeiro input, que já vem carregado na página. Porém, se eu adicionar dinamicamente mais um campo, ele perde esta função de consultar o banco conforme eu digito. Queria saber como eu chamo esta função que o primeiro input possui.

Poste aí como você está fazendo, se eu souber resolver, vou tentar te ajudar.

[sergionpinheiro 0]

O código completo está no início do post. Você pode ver que quando carrego a página, um campo de telefone já vem por padrão e esse funciona. Porém quando clico para adicionar um novo campo, esta função deixa de funcionar, ou seja a máscara ou qualquer outra coisa atrelada com campos dinâmicos, deixam de funcionar após o primeiro add.

Quero saber como faço para adaptar este código para toda vez que eu clicar para adicionar um campo, ele traga a função, como se eu tivesse acabado de carregar a página. Entendeu?

[kelvim 11]

Uai, mas a função, que você postou no inicio do post é apenas a mascara, e a mascara te mostrei funcionando no link acima (https://fiddle.jshell.net/8rgf35qh/)

Eu pedi para você postar, pois você falou que tem um autocomplete que não está funcionando com o campo dinâmico, o autocomplete você não mostrou como está fazendo.

Se eu entendi errado me desculpe.

[sergionpinheiro 0]

OK, pensei que você estava falando da máscara, segue o código:

Campos extras

<script type="text/javascript">
  $(function() {
    i = 1;
    $("#add_produtos").click(function() {
      var input = '<div class="control-group number">';
      input += ' <div class="col-sm-9"><br><input name="produtos[]" autocomplete="off" type="text" class="form-control" placeholder="Produtos" size="150" id="qprodutos" required></div>';
      input += ' <div class="col-sm-1"><br><input name="qtd[]" autocomplete="off" type="number" class="form-control" placeholder="Qtd" required></div><br>';
      input += ' <a href="#produtos" class="btn btn-danger del_row"><span class="glyphicon glyphicon-remove"></span>  Excluir</a></div>';

      i++;
      if(i < 6) {
        $("#produtos_extras").append(input);
        return false;
      }

    });

    $('.del_row').live('click', function() {
      $(this).parent().remove();
    });

  });

</script>

Preencher o autocomplete:

<script type="text/javascript">
  $(function() {
    $("#qprodutos").typeahead({
      source: function(query, process) {
        $.ajax({
          url: 'check_produtos',
          type: 'POST',
          data: 'query=' + query,
          dataType: 'JSON',
          async: true,
          success: function(data) {
            process(data);
          }
        });
      },
      minLength: 1
    });
  });
</script>

A ideia é a mesma do telefone.

[kelvim 11]

Cara, o mesmo conceito com relação à máscara.

primeira coisa, como terão diversos na página, trocar id por class

depois coloque o código que chama o autocomplete depois da criação do campo.

$("#add_produtos").click(function() {
      var input = '<div class="control-group number">';
      input += ' <div class="col-sm-9"><br><input name="produtos[]" autocomplete="off" type="text" class="form-control" placeholder="Produtos" size="150" id="qprodutos" class="qtdproduto" required></div>';
      input += ' <div class="col-sm-1"><br><input name="qtd[]" autocomplete="off" type="number" class="form-control" placeholder="Qtd" required></div><br>';
      input += ' <a href="#produtos" class="btn btn-danger del_row"><span class="glyphicon glyphicon-remove"></span>  Excluir</a></div>';

      i++;
      if(i < 6) {
        $("#produtos_extras").append(input);
        return false;
      }

	  $(".qprodutos").typeahead({
      source: function(query, process) {
        $.ajax({
          url: 'check_produtos',
          type: 'POST',
          data: 'query=' + query,
          dataType: 'JSON',
          async: true,
          success: function(data) {
            process(data);
          }
        });
      },
      minLength: 1
    });
});

Atualizei para testar, mas aviso que está bagunçado (meio corrido aqui hoje) kkk https://fiddle.jshell.net/8rgf35qh/1/

[sergionpinheiro 0]

Boa tarde Kelvim,

Fiz o que você falou, transformei em class e coloquei a função dentro do campo dinâmico, porém sem sucesso. Continua funcionando somente o primeiro, os demais não carregam os dados do banco.

Alguma outra luz?

[sergionpinheiro 0]

Resolvido, no lugar da máscara da data, coloquei a função de carregar os dados do banco, tanto no início quanto no final. Também coloquei como classe. Valeu Kelvim, obrigado pela ajuda.

Só mais uma coisa. Implementei duas funções dessas na mesma página para forms diferentes, através do window.onload = function() {, porém ele só carrega o último da lista, ou seja, o que está mais abaixo na página. Como faço para carregar duas funções no mesmo onload?