ComboBox and mask of cpf and cnpj

Question

ComboBox and mask of cpf and cnpj

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm doing a system in PHP and I would like that when selecting individual or legal entity in the combobox automatically placed the maskara in an imput. I have already researched the net and the examples that have uses 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 the combobox with the value of "1" an AddPlaceHolder error occurs.

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

php jquery

asked by anonymous 04.05.2016 / 07:32

2 answers

Windows Phone 8.1 deploy error: DEP0001: Unexpected Error: -1988945906 WordPress before post without the link "read more"

score 1 · Answer 1

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

When there is a value change, 1 or 2, the same holds for option the mask and applies on target to which select refers. In this way, I can put any mask in options without relying on functions for each one, making it easier to manipulate 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><scriptsrc="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>

score 0 · Answer 2

You can implement as follows:

function mascaraCPF(element) {

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

}

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

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

}

I removed the id from within its function so it does not get stuck, so you can use it elsewhere on your system. Since you are using function you do not have to use $(document).ready(); within the function. According to the "The page can not be safely manipulated until the document is ready. JQuery detects this state of readiness for you." see here , when you use function it should only be executed when it is requested to run.

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

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

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

});