Making text input enabled dependant upon radio buttons in WordPress

[AndrewAfresh]

I 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

[m_hutley]

I assume you’ve got another } on the end of the function.

1. You do need to assign the onchange to both radio elements.
2. You cant getElementById to find a thing by name. Personally, i’d querySelector handing it the selector [name="SepType"]:checked
3. You cant switch on the Element. you’re probably trying to switch on the value of the element.
4. If the Alert isnt triggering when you click on Dash, has something thrown an error into the javascript console? (Hit F12, choose Console)

[AndrewAfresh]

@m_hutley

If the Alert isnt triggering when you click on Dash, has something thrown an error into the javascript console? (Hit F12, choose Console)

Thank you. I’m getting “Uncaught ReferenceError: chkSname is not defined” in the console. Have I put the .js file in the wrong place?

[m_hutley]

well you dont use the words “chkSname” in your example, so I dont know what is throwing that error.

[AndrewAfresh]

I’d changed disableElement to chkSname - I’ve changed it back - it now says “disableElement is not defined”

[m_hutley]

so either youre missing that } at the end of the function, or your code isnt being loaded