My JavaScript to change visibility does not work

Question

My JavaScript to change visibility does not work

Navigation

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

1

I wrote a form with these elements:

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

At the end, before closing the body, the tag <script> that calls the following code:

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;

However, when I navigate to the form page, the #radio_pessoa_fisica input is checked by the script, but the event handler is not called, and both text inputs, #cpf_req and #cnpj_req are visible.

Only by clicking the radio inputs on the page itself is the function called and doing what is expected.

Can anyone explain to me why this happens, and if possible, help me get the desired effect (that function radio_pessoa_change() is executed and hides the input #cnpj_req

Please, thank you for your responses to pure JavaScript.

javascript html html5

asked by anonymous 27.11.2018 / 20:22

3 answers

0

You are hiding the label from the radio button, not the CPF / CPNJ input. Try changing your radio_pessoa_change function

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

Remember to also hide the text, 'CPNJ' and 'CPF'

27.11.2018 / 20:50

0

Apparently, you have a id duplicate, and it seems to me that you want hide in input text and not radio button . So I would put the ids in the input text labels, at the end I put a call of your function so that the first time it hides the cnpj, it looks like this:

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>

I just edited the HTML javascript as you posted except for adding the radio_pessoa_change call at the end

27.11.2018 / 21:03

How to make a Mask in pure JavaScript? Extract only the name of a file from the full path

score 2 · Accepted Answer

The change event is only triggered by user action. It is easier to change by click which can also be triggered via code using the .click() method:

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();