How do I require an input into a textbox only 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 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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

Try like following snippet:

const text = document.querySelector('#otherbox')
const check = document.querySelector('#other')
const btn = document.querySelector('#btn')
check.addEventListener('click', () => {
  text.classList.toggle('hidden')
  text.classList.contains('hidden') ?
    btn.disabled = false :
    btn.disabled = true 
})
text.addEventListener('keyup', () => {
  !text.value.length ?
    btn.disabled = true :
    btn.disabled = false
})

.hidden {
  display: none;
}

<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" class="hidden"></textarea>
        <input type="submit" value="Apply" id="btn">
 </form>