0

Estou fazendo um sistema em PHP e gostaria que ao selecionar pessoa física ou jurídica na combobox colocasse automaticamente a maskara em uma imput. Já pesquisei na net e os exemplo que tem utiliza a JQUERY-1.3.2.js, mas meu projeto está na JQUERY-2.0.3.min.js, porque meu template utiliza.

O meu problema ocorre quando eu seleciono Pessoa física na combobox com o value de "1" ocorre um erro de AddPlaceHolder.

segue o código que copiei de um exemplo:

    <script src="js/jquery/jquery-2.0.3.min.js"></script>
    <script>
    function aplicaMascara(opcao) {
    if (opcao == "1")
    document.getElementById("cli_cnpcnpj").setAttribute("onclick","mascaraCPF()");
    if (opcao == "2")
    document.getElementById("cli_cnpcnpj").setAttribute("onclick","mascaraCNPJ()");
    }

   function mascaraCPF() {
   $(document).ready(function(){
   $(function(){
    $.mask.addPlaceholder("~","[+-]");
    $("#cli_cnpcnpj").mask("999.999.999-99");

    });
    });
    }

    function mascaraCNPJ() {
    $(document).ready(function(){
    $(function(){
    $.mask.addPlaceholder("~","[+-]");
    $("#cli_cnpcnpj").mask("99.999.999/9999-99");

    });
    });
    }

    <div class="col-md-2">
    <label class="control-label" for="inputSuccess1">tp. Pessoa</label>
    <select  data-toggle="tooltip" data-placement="bottom" title="selecione o tipo de pessoa" class="form-control input-sm"   id="cli_tppessoa"   name="cli_tppessoa" onchange="aplicaMascara(this.value)" >                       
    <option  value="TT">[ --selecione o tp de pessoa-- ]</option>                                    <option  value="1">Pessoa Física</option>
    <option  value="2">Pessoa Jurídica</option>
    </select>
    </div>

Porém quando olho pela ferramenta do desenvolvedor no chrome aparece o seguinte erro:

Erro de AddPlaceHolder

2 Respostas 2

1

Segue minha colaboração. Normalmente costumo utilizar desta forma em meus projetos. No select, coloco um data-target-id para fazer referência onde quero que este item afete e, instancio pela classe o evento change.

Quando houver a troca de valor, 1 ou 2, o mesmo pega do option a máscara e aplica no target ao qual o select faz referência. Desta forma, posso colocar qualquer máscara nos options sem depender de funções para cada um, ficando mais fácil de manusear e alterar. Pelo menos é minha opnião, espero que ajude.

$(function() {
  $('.maskField').on('change', function(e) {
    var value = $(this).val();

    if (value == "") return;

    var mask = $(this).find(':selected').data('mask');
    var target = "#" + $(this).data('target-id');

    $(target).mask(mask);
    $(target).attr('placeholder', mask);

  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>


<div class="container">
    <div class="form-group">
        <label for="cli_tppessoa">Pessoa Física ou Jurídica:</label>
        <select class="form-control maskField" id="cli_tppessoa" data-target-id="cpfOuCnpj">
            <option value="">Selecione</option>
            <option value="1" data-mask="000.000.000-00">Pessoa Física</option>
            <option value="2" data-mask="00.000.000/0000-00">Pessoa Jurídica</option>
        </select>
    </div>
    <div class="form-group">
        <label for="cpfOuCnpj">Informe seu CPF/CNPJ:</label>
        <input type="text" id="cpfOuCnpj" class="form-control" />
    </div>
</div>

0

Você pode implementar da seguinte forma:

function mascaraCPF(element) {

    $(element).mask("999.999.999-99");

}

o parametro elemente das funções serão especificados através de um id referente ao campo exempo '#cpf';

function mascaraCNPJ(element) {
    $(element).mask("99.999.999/9999-99");

}

Retirei o id de dentro de sua função para não ficar engessada, dessa forma você poderá utilizar em outros lugares do seu sistema. Como você está utilizando função não tem a necessidade de utilizar $(document).ready(); dentro da função. Segundo a documentoção "A página não pode ser manipulada com segurança até que o documento esteja pronto. jQuery detecta esse estado de prontidão para você." veja mais aqui, quando você utiliza função ele deve ser executada somente quando for solicitada sua execução.

$(document).on('change','#cli_tppessoa',function(){

   var value = parseInt($(this).val());

   if (value == 2) {
      mascaraCNPJ('#cli_cnpcnpj');
   } else {
      mascaraCPF('#cli_cnpcnpj');
   }

});

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 .