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.
Hello, @Riscadoooooo and Scribble. I’m starting in Javascript, could you explain to me what you mean by "exclusive event"? Thank you!
– VBobCat
Have you tried adding an Evenlistener to the click event instead of a change?
– Dimitrius Lachi
@Dimitriuslachi, already, but still doesn’t get the definition made by the initial script.
– VBobCat
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?
– VBobCat
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
– Dimitrius Lachi
@Dimitriuslachi, I’m sure because after the page loads, they respond to clicks.
– VBobCat
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...
– VBobCat
I sent a possibility below
– Dimitrius Lachi
Trade the event for
click
instead ofchange
and changes to:document.getElementById("radio_pessoa_fisica").click();
– Sam
@Sam, your solution worked!
– VBobCat