How do I require an input in a textbox if a certain checkbox is selected?-CodePudding

 <form>
        <label>Skills</label>
        <br>
        <br>
        <input type="checkbox" id="skill1" name="skill1" value="Javascript">
        <label for="skill1"> Extensive knowledge of Javascript</label>
        <br>
        <br>
        <input type="checkbox" id="skill2" name="skill2" value="Python">
        <label for="skill2"> Extensive knowledge of Python</label>
        <br>
        <br>
        <input type="checkbox" id="skill3" name="skill3" value="C#">
        <label for="skill3"> Extensive knowledge of Networking</label>
        <br>
        <br>
        <input type="checkbox" id="skill4" name="skill4" value="C#">
        <label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
        <br>
        <br>
        <input type="checkbox" id="skill5" name="skill5" value="C#">
        <label for="skill5"> Extensive knowledge of Security foundations</label>
        <br>
        <br>
        <input type="checkbox" id="skill6" name="skill6" value="C#">
        <label for="skill6"> Extensive knowledge of AWS service selection</label>
        <br>
        <br>
        <input type="checkbox" id="skill7" name="skill7" value="C#">
        <label for="skill7"> Ability to work in a team</label>
        <br>
        <br>
        <input type="checkbox" id="skill8" name="skill8" value="C#">
        <label for="skill8"> 5  years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill9" name="skill9" value="C#">
        <label for="skill9"> 10  years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill10" name="skill10" value="C#">
        <label for="skill10"> 20  years experience</label>
        <br>
        <br>
        <input type="checkbox" id="other" name="other" value="other">
        <label for="other"> I have other skills. Please list other skills below.</label>
        <br>
        <br>
        <br>
        <label for="subject">Subject:</label>
        <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
        <input type="submit" value="Apply">
      </form>

How do I make it so that, if the "other" checkbox is selected, the textbox must be filled out or the form cannot be submitted. I must use JavaScript to do this. Please explain in detail because I'm rather new to JavaScript.

CodePudding user response：

Yes, you can easily achieve this using JavaScript:

HTML:

<input
    type="checkbox"
    id="other"
    name="other"
    value="other"
    onclick="otherCheckBox()"
  />

(Just add an onclick event to your 'other' checkbox, so that it fires off a function whenever clicked)

JS:

<script>
  function otherCheckBox() {
    var checkBox = document.getElementById("other");  //Getting the 'other' CheckBox
    var otherBox = document.getElementById("otherbox");  //Getting the TextBox
    if (checkBox.checked) {
      otherBox.required = "true"; //Setting the 'required' parameter to true if checkbox is checked
    } else {
      otherBox.required = "";  //Setting the 'required' parameter to false if the checkbox is not checked
    }
  }
</script>

Add this Script tag in your html head.

When fired, This function will check if the checkbox with id other is checked. If it is checked, it will set the required attribute of the textbox with id otherbox to true, and if not checked, it will set it to false.