Combobox and mask of Cpf and cnpj

Question

I am making a system in PHP and I would like when selecting natural or legal person in the combobox to automatically put the maskara in an imput. I have already searched on the net and the examples you have use JQUERY-1.3.2.js, but my project is in JQUERY-2.0.3.min. js, because my template uses.

My problem occurs when I select Individual in combobox with the value of "1" an Addplaceholder error occurs.

follows the code I copied from an example:

    <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>

But when I look at the developer tool in Chrome the following error appears:

Answer 1

Follow my collaboration. I usually use this way in my projects. In select, I put a data-target-id to reference where I want this item to affect and, I urge by the class the event change.

When there is the exchange of value, 1 or 2, the same handle of the option the mask and apply in the target to which the select makes reference. This way I can put any mask on options without depending on functions for each one, making it easier to handle and change. At least it is my opinion, I hope it helps.

$(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>

Answer 2

You can implement as follows:

function mascaraCPF(element) {

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

}

the element parameter of the functions will be specified by an id referring to the field example '#cpf';

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

}

I removed the id from inside your function so it doesn’t get plastered, so you can use it elsewhere in your system. How you are using function has no need to use $(document).ready(); inside the function. According to the document "The page cannot be handled safely until the document is ready. jQuery detects this state of readiness for you."See more here, when you use function it must be executed only when its execution is requested.

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

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

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

});