Question
-
Topic
-
Making text input enabled dependant upon radio buttons in WordPress
LockedI have an HTML form on a WordPress page and I want a text field to be enabled or disabled, depending on what the user selects from a set of radio buttons.
I think I’ve got the ingredients together, thus:
1) HTML says:
<input type=”radio” id=”Dash” name=”SepType” value=”Dash” onChange=”disableElement()” required>
<label for=”Dash”>Dash</label><br>
<input type=”radio” id=”Dot” name=”SepType” value=”Dot”>
<label for=”Dot”>Dot<br></label>
2) custom.js in public_html folder has:
function disableElement() {
window.alert (9);
switch (document.getElementById(“SepType”)) {
case “None”:
document.getElementById(“sname”).disabled = true;
break;
default:
document.getElementById(“sname”).disabled = false;
}
}
None of it fires not even the window alert. Please can you review & see why it’s not working? Thank you
All Answers
-
-
Reply To: Making text input enabled dependant upon radio buttons in WordPress
It looks like there are a couple of issues in your code. Let’s go through them and make some corrections.
In your HTML, you are calling disableElement() on the radio button change event, but the function you’ve defined is looking for an element with the ID “SepType” which doesn’t exist. Instead, you should pass the reference to the radio button element itself.
In your JavaScript, the switch statement is trying to match the value of the radio button with “None”, but the values are actually “Dash” and “Dot”. Additionally, you should be checking the value of the selected radio button, not the entire radio button element.
Here’s a corrected version:
HTML:
html
Copy code
<input type=”radio” id=”Dash” name=”SepType” value=”Dash” onchange=”disableElement(this)” required>
<label for=”Dash”>Dash</label><br>
<input type=”radio” id=”Dot” name=”SepType” value=”Dot” onchange=”disableElement(this)”>
<label for=”Dot”>Dot<br></label>
<input type=”text” id=”sname” placeholder=”Text Field”>
JavaScript (custom.js):javascript
Copy code
function disableElement(radio) {
window.alert(9);
switch (radio.value) {
case “Dash”:
document.getElementById(“sname”).disabled = true;
break;
default:
document.getElementById(“sname”).disabled = false;
}
}
Changes made:Passed this to the disablement () function in the change attribute.
Checked the radio.value in the switch statement instead of the entire radio button element.
Added a placeholder text field with the ID “sname” for testing purposes.
Now, when you select the “Dash” radio button, the text field with the ID “sname” should be disabled, and when you select the “Dot” radio button, it should be enabled. The alert(9) is there to confirm that the function is being called.Note: harmful link removed by moderator.
-
-
