The following is my html code:
<input type="text" class="form-control" id="emp" onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" >
I have a radiobutton which when checked should remove the onkeypress event and when unchecked should activate it. This is my js:
input.addEventListener('change', function() {
if (input.checked) {
document.getElementById("tag").innerHTML="No";
document.getElementById("emp").value="";
document.getElementById("emp").removeAttribute("onkeypress");
} else {
document.getElementById("tag").innerHTML="Name";
document.getElementById("emp").value="";
document.getElementById("emp").setAttribute("onkeypress", "");
}
});
But when I toggle the radiobutton, the code doesn't work properly. Can you please help me?
I think it's better to handle this feature in your onkeypress function, just check if the radio button is checked do anything you want, if not return null
You are setting onkeypress attribute to an empty string in the unchecked case, so it will do nothing, same as if the attribute is removed. You'd need to set it back to the original text, which you could get with getAttribute and store.
var onkeypress_code = document.getElementById("emp").getAttribute("onkeypress");
input.addEventListener('change', function() {
if (input.checked) {
document.getElementById("tag").innerHTML="No";
document.getElementById("emp").value="";
document.getElementById("emp").removeAttribute("onkeypress");
} else {
document.getElementById("tag").innerHTML="Name";
document.getElementById("emp").value="";
document.getElementById("emp").setAttribute("onkeypress", onkeypress_code);
}
});
But I would recommend doing this differently. You can use addEventListener and removeEventListener (removing the onkeypress from the HTML):
function emp_onkeypress(event) {
return (
(event.charCode > 64 && event.charCode < 91) ||
(event.charCode > 96 && event.charCode < 123)
);
}
function checkbox_onchange(event) {
if (input.checked) {
document.getElementById("tag").innerHTML="No";
document.getElementById("emp").value="";
document.getElementById("emp").removeEventListener("keypress", emp_onkeypress);
} else {
document.getElementById("tag").innerHTML="Name";
document.getElementById("emp").value="";
document.getElementById("emp").addEventListener("keypress", emp_onkeypress);
}
}
input.addEventListener('change', checkbox_onchange);
checkbox_onchange(); // update based on initial checkbox state
Or you can simply handle the checked/unchecked state in your keypress handler. If you define the keypress handler in your JS, you will have access to the input variable.
function emp_onkeypress(event) {
if (input.checked) {
return;
}
return (
(event.charCode > 64 && event.charCode < 91) ||
(event.charCode > 96 && event.charCode < 123)
);
}
document.getElementById("emp").addEventListener("keypress", emp_onkeypress);
input.addEventListener('change', function() {
if (input.checked) {
document.getElementById("tag").innerHTML="No";
document.getElementById("emp").value="";
} else {
document.getElementById("tag").innerHTML="Name";
document.getElementById("emp").value="";
}
});
Also, charCode is deprecated; key and code are the recommended APIs.