5

O que desejo fazer

O cara tem no formulário a opção de cadastrar pessoa física ou jurídica. Quero que quando ele clicar no radio do pessoa física, ele limpe o input de pessoa juridica, e vice versa.

O que eu fiz

Estou me sentindo um bobo. Fiz esse código e depois procurei na internet para validar se existia algo de errado. Para fazer o teste, eu digitei o CNPJ, e depois cliquei em pessoa física, e preenchi o CPF. Após isso voltei para pessoa jurídica, e o CNPJ ainda estava lá dentro, então cliquei de novo em pessoa física, e o CPF tinha desaparecido, restando apenas o placeholder CPF, porém quando eu cliquei pra preencher o valor apareceu. inserir a descrição da imagem aqui

Meu Código

Formulário HTML

<section class="col col-md-3">
     <label for="id_receiver-destiny_type_people_0">
         <input id="id_receiver-destiny_type_people_0" type="radio" value="juridic" checked name="receiver-destiny_type_people">
             Pessoa Jurídica
     </label>
</section>
<section class="col col-md-3">
    <label for="id_receiver-destiny_type_people_1">
        <input id="id_receiver-destiny_type_people_1" type="radio" value="individual" name="receiver-destiny_type_people">
            Pessoa Física
    </label>
</section>

<input id="id_receiver-cnpj" name="receiver-cnpj" placeholder="CNPJ" type="text" />
<input id="id_receiver-cpf" name="receiver-cpf" placeholder="CPF" type="text" />

jQuery

$("input[name='receiver-destiny_type_people']").bind('click', $.proxy(this.checkCompanyType, this));

checkCompanyType: function(){
    companyType = $("input[name='receiver-destiny_type_people']").val();
    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
    }
},
3
  • Falta aspas aqui: $("#id_receiver-cnpj").val(). O correto seria $("#id_receiver-cnpj").val(''); Commented 21/10/2015 às 16:06
  • Desculpa @EmirMarques, tenho isso no código, sem querer tirei. Atualizei a pergunta. Commented 21/10/2015 às 16:12
  • Postei a resolução na primeira resposta Commented 21/10/2015 às 16:13

2 Respostas 2

5

Falta você incluir o filtro checked no momento pegar a opção selecionada.

$("input[name='receiver-destiny_type_people']:checked").val()

$("input[name='receiver-destiny_type_people']").bind('click', $.proxy(this.checkCompanyType, this));

function checkCompanyType(){
    companyType = $("input[name='receiver-destiny_type_people']:checked").val();

    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
    }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-md-3">
     <label for="id_receiver-destiny_type_people_0">
         <input id="id_receiver-destiny_type_people_0" type="radio" value="juridic" checked name="receiver-destiny_type_people">
             Pessoa Jurídica
     </label>
</section>
<section class="col col-md-3">
    <label for="id_receiver-destiny_type_people_1">
        <input id="id_receiver-destiny_type_people_1" type="radio" value="individual" name="receiver-destiny_type_people">
            Pessoa Física
    </label>
</section>

<input id="id_receiver-cnpj" name="receiver-cnpj" placeholder="CNPJ" type="text" />
<input id="id_receiver-cpf" name="receiver-cpf" placeholder="CPF" type="text"/>

7
  • Fiz essa mudança. Ele "limpa" o campo, mostrando o placeholder, mas ao clica em cima do campo ele volta com o valor que eu tinha digitado. Eu mostro isso no gif da pergunta. Commented 21/10/2015 às 16:15
  • Rodou o esse meu exemplo? Não consegui simular tal comportamento Commented 21/10/2015 às 16:16
  • Como você pode ver também, os campos tem máscara. Isso influenciaria em algo ? Commented 21/10/2015 às 16:17
  • Eu fiz um teste, e dentro da função, depois de mudar qualquer valor, eu dei um alert nos campos. Vamos dizer que preenchi cnpj e cliquei em pessoa física. Ele no value de cnpj ele não mostra nada, e se eu clico em pessoa jurídica ele não mostra nada no value de cpf, mas caso eu clique dentro do input, o valor antigo volta. Commented 21/10/2015 às 16:21
  • 1
    @AllanRamos não mude a intenção do post com uma edição. Avise o OP que tem algo errado ou poste uma resposta própria com a solução.
    – Jéf Bueno
    Commented 21/10/2015 às 16:38
4

A resposta do @EmirMarques está correta. Eu apenas adicionei a parte de mask novamente no meu código. Pois mesmo limpando, quando vc clica em cima do campo ele volta com o valor anterior. Com essa definição das máscaras, ele impede isso.

checkCompanyType: function(){
    companyType = $("input[name='receiver-destiny_type_people']:checked").val();
    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
        $('#id_cpf, #id_receiver-cpf').mask('?999.999.999-99', {placeholder: "_"});
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
        $('#id_cnpj, #id_receiver-cnpj').mask('?99.999.999/9999-99', {placeholder: "_"});
    }
},

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 .