Question

  • Creator
    Topic
  • #4213004

    Making text input enabled dependant upon radio buttons in WordPress

    by apn72 ·

    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

You are posting a reply to: Making text input enabled dependant upon radio buttons in WordPress

The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our Community FAQs for details. All submitted content is subject to our Terms of Use.

All Answers

  • Author
    Replies
    • #4213148

      Reply To: Making text input enabled dependant upon radio buttons in WordPress

      by born2broke ·

      In 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.

      • This reply was modified 4 weeks ago by born2broke.
      • This reply was modified 4 weeks ago by born2broke.
      • This reply was modified 4 weeks ago by Avatar photokees_b.
Viewing 0 reply threads