How do I require an input into a textbox only if a certain checkbox is selected

Question

 <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 where, if the 'other' checkbox is selected, the textbox must be filled in before you can submit the form. I know how to do this with a dropdown list of options but not checkboxes. I don't mind if the textbox is hidden until the 'other' checkbox is selected.

Answer 1

You could set the required attribute on the textarea using the checkbox value via the change event to make it reactive.

 const other = document.getElementById('other'), subject = document.getElementById('otherbox'); other.onchange = function() { subject.required = this.checked; };

 <form id="suvery"> <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> <br> <input type="submit" value="Apply"> </form>

Answer 2

here's what you can do:

 document.getElementById('other').onchange = (e) => { if (e.target.checked) { document.getElementById('otherbox').required = true; } else { document.getElementById('otherbox').required = false; } }

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