1

Escrevi um formulário com estes elementos:

<div>
    <label for="radio_pessoa_fisica" id="label_cpf_req">
        <input name="pessoa" id="radio_pessoa_fisica" type="radio" value="fisica" required>
        Pessoa Física
    </label>
    <label for="radio_pessoa_juridica" id="label_cnpj_req">
        <input name="pessoa" id="radio_pessoa_juridica" type="radio" value="juridica" required>
        Pessoa Jurídica
    </label>
</div>
<div>
    <label for="cpf_req">
        CPF
        <input id="cpf_req" type="text" placeholder="000.000.000-00" required maxlength="14" pattern="([0-9][.-]?){3,11}">
    </label>
    <label for="cnpj_req" id="label_cnpj_req" >
        CNPJ
        <input id="cnpj_req" type="text" placeholder="00.000.000/0000-00" required maxlength="18">
    </label>
</div>

E lá ao final, antes de fechar o body, a tag <script> que chama o seguinte código:

function radio_pessoa_change() {
    var pfis = document.getElementById("radio_pessoa_fisica").checked;
    document.getElementById("label_cpf_req").style.display = pfis ? "block" : "none";
    document.getElementById("label_cnpj_req").style.display = pfis ? "none" : "block";
    document.getElementById("req_rep").disabled = !pfis;
    if (!pfis) {
        document.getElementById("req_rep").checked = true
    }
}

document.getElementById("radio_pessoa_fisica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_juridica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_fisica").checked = true;

No entanto, quando navego para a página do formulário, o input #radio_pessoa_fisica é checado pelo script, mas o manipulador de evento não é chamado, e ambos os inputs de texto, #cpf_req e #cnpj_req ficam visíveis.

Somente clicando nos inputs rádio na própria página é que a função é chamada e faz o que se espera.

Alguém pode me explicar por que isso acontece, e se possível, me ajudar a obter o efeito desejado (que a function radio_pessoa_change() seja executada e oculte o input #cnpj_req

Por favor, agradeço se as respostas se ativerem a JavaScript puro.

10
  • Olá, @RiscadoOoOoO e RabiscadoO. Estou iniciando em JavaScript, poderia me explicar melhor o que quer dizer com "evento exclusivo"? Obrigado!
    – VBobCat
    Commented 27/11/2018 às 19:33
  • 1
    Ja tentou adicionar um EvenListener pro evento de 'click' ao invés de change? Commented 27/11/2018 às 19:35
  • @DimitriusLachi, já, mas mesmo assim, não pega a definição feita pelo script inicial.
    – VBobCat
    Commented 27/11/2018 às 19:38
  • Na verdade, o problema não é tão sério, posso definir a visibilidade dos inputs de texto no script inicial, também. Só fiquei intrigado com o fato de que o evento change não é acionado quando mudo o valor do "checked". Esses eventos, eles são limitados a ações provenientes da UI da página renderizada?
    – VBobCat
    Commented 27/11/2018 às 19:40
  • 1
    Troque o evento por click em vez de change e altere para: document.getElementById("radio_pessoa_fisica").click();
    – Sam
    Commented 27/11/2018 às 19:56

3 Respostas 3

2

O evento change só é disparado com ação do usuário. Fica mais fácil trocando por click que poderá ser disparado também via código usando o método .click():

document.getElementById("radio_pessoa_fisica").addEventListener("click", radio_pessoa_change);
document.getElementById("radio_pessoa_juridica").addEventListener("click", radio_pessoa_change);
document.getElementById("radio_pessoa_fisica").click();
0

Você esta escondendo a label do radio button, e não o input de CPF/CPNJ. Tente trocar sua função radio_pessoa_change

function radio_pessoa_change() {
  var pfis = document.getElementById("radio_pessoa_fisica").checked;
  document.getElementById("cpf_req").style.display = pfis ? "block" : "none";
  document.getElementById("cnpj_req").style.display = pfis ? "none" : "block";
  document.getElementById("req_rep").disabled = !pfis;
  if (!pfis) {
    document.getElementById("req_rep").checked = true
  }
}

Lembre-se de esconder também o texto, 'CPNJ' e 'CPF'

4
  • como os inputs estão dentro dos labels, eu escondo os labels pra que o texto e os campos sumam juntos
    – VBobCat
    Commented 27/11/2018 às 19:59
  • Você esta escondendo as labels dos radios buttons e não dos campos de CPF e CNPJ, veja os ids que esta usando, vc esconde as labels dos dois radios, se precisa esconder os campos de digitação, troque sua função pela que descrevi na resposta Commented 27/11/2018 às 20:00
  • 1
    Obrigado. Consegui fazer funcionar mudando o manipulador pra capturar o evento "click" (como você tinha sugerido), e depois mudar o meu comando de document.getElementById("radio_pessoa_fisica").checked = true; pra document.getElementById("radio_pessoa_fisica").click();
    – VBobCat
    Commented 27/11/2018 às 20:03
  • Show de bola. espero ter ajudado Commented 27/11/2018 às 20:06
0

Aparentemente você esta com um id duplicado, e pelo que me parece você quer dar hide no input text e não no radio button. Por isso eu colocaria os ids nas labels dos input text, ao final eu coloquei uma chamada da sua função para que a primeira vez ele esconda o cnpj ficando assim:

function radio_pessoa_change() {
    var pfis = document.getElementById("radio_pessoa_fisica").checked;
    document.getElementById("label_cpf_req").style.display = pfis ? "block" : "none";
    document.getElementById("label_cnpj_req").style.display = pfis ? "none" : "block";
    document.getElementById("req_rep").disabled = !pfis;
    if (!pfis) {
        document.getElementById("req_rep").checked = true
    }
}

document.getElementById("radio_pessoa_fisica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_juridica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_fisica").checked = true;

radio_pessoa_change();
<div>
    <label for="radio_pessoa_fisica">
        <input name="pessoa" id="radio_pessoa_fisica" type="radio" value="fisica" required>
        Pessoa Física
    </label>
    <label for="radio_pessoa_juridica">
        <input name="pessoa" id="radio_pessoa_juridica" type="radio" value="juridica" required>
        Pessoa Jurídica
    </label>
</div>
<div>
    <label for="cpf_req"   id="label_cpf_req">
        CPF
        <input id="cpf_req" type="text" placeholder="000.000.000-00" required maxlength="14" pattern="([0-9][.-]?){3,11}">
    </label>
    <label for="cnpj_req" id="label_cnpj_req" >
        CNPJ
        <input id="cnpj_req" type="text" placeholder="00.000.000/0000-00" required maxlength="18">
    </label>
</div>

Apenas editei o HTML o javascript esta como você publicou exceto pela adição da chamada da radio_pessoa_change no final

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 .