My Javascript code to change visibility does not work

Asked

Viewed 101 times

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>

And there at the end, before closing the body, the tag <script> calling 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 input #radio_pessoa_fisica 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 does what is expected.

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

Please thank me if the answers are enabled to pure Javascript.

javascript html html5

  • Hello, @Riscadoooooo and Scribble. I’m starting in Javascript, could you explain to me what you mean by "exclusive event"? Thank you!

  • 1

    Have you tried adding an Evenlistener to the click event instead of a change?

  • @Dimitriuslachi, already, but still doesn’t get the definition made by the initial script.

  • In fact, the problem is not so serious, I can define the visibility of text inputs in the initial script, too. I was just intrigued by the fact that the change event is not triggered when I change the "checked" value. These events, they are limited to actions coming from the UI of the rendered page?

  • One question, are you sure your eventListeners are being assigned? Place a Debugger before adding the Event listeners and see if they are being added

  • @Dimitriuslachi, I’m sure because after the page loads, they respond to clicks.

  • I am learning Javascript, and I already have to prepare this form. In the future I want to learn Jquery too, but now I’m afraid to curl up...

  • I sent a possibility below

  • 1

    Trade the event for click instead of change and changes to: document.getElementById("radio_pessoa_fisica").click();

  • @Sam, your solution worked!

Show 5 more comments

3 answers

2


The event change is only fired with user action. It is easier to exchange for click which can also be triggered via code using the method .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

You’re hiding the radio button label, not the CPF/CPNJ input. Try to change your role 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
  }
}

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

  • as the inputs are inside the Abels, I hide the Abels so that the text and fields disappear together

  • You are hiding the Abels of the radios Buttons and not of the fields of CPF and CNPJ, see the ids you are using, you hide the Abels of the two radios, if you need to hide the input fields, change your function to what I described in the answer

  • 1

    Thank you. I was able to make it work by changing the handler to capture the "click" event (as you suggested), and then change my command to document.getElementById("radio_pessoa_fisica").checked = true; for document.getElementById("radio_pessoa_fisica").click();

  • Ball show. I hope I helped

0

Apparently you’re with a id duplicated, and from what it seems to me you want to give in input text and not in the radio button. That’s why I’d put the ids in the Bils of input text, at the end I put a call from your function so that the first time it hides the cnpj getting 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 is as you published except by adding the call from radio_pessoa_change in the end

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.