Javascript – Toggle html5 required=“” attribute based on form selection Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript – Toggle html5 required=“” attribute based on form selection without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a script that’s almost complete but I can’t figure out the last piece. The Javascript makes the check box appear or disappear based on the drop down selection (this is working great). But I’m trying to make the check box “Required” if the checkbox is present (the part I can’t figure out).

I’m using the htm5 required="" attribute on the check box field, but the form still tries to validate it even with the 3rd option selected, which hides the check box altogether.

Is there a way to toggle on/off the required="" in coordination with the selection of the drop down, or any other suggestions?

<script>    
   function getTerms(select){
        var selectedString = select.options[select.selectedIndex].value;
        if(selectedString == "1" || selectedString == "2")
        {
            document.getElementById("terms_target").style.display = "block";
        }else {
            document.getElementById("terms_target").style.display = "none";
        }
    }
</script>

<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Answer

window.onload=function() {
  var sel = document.getElementsByName("InquiryType")[0];
  sel.onchange=function() {
    var selectedString = this.value,
        show = selectedString == "1" || selectedString == "2",
        terms = document.getElementById("terms_target"),
        checked=document.getElementsByName("checked")[0];
    terms.style.display = show?"block":"none";
    if (show) checked.setAttribute("required","required");
    else checked.removeAttribute("required");
  }
  sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
  <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Older version

window.addEventListener("load", function() {
  const sel = document.getElementsByName("InquiryType")[0],
    terms = document.getElementById("terms_target"),
    checked = document.getElementsByName("checked")[0],
    toggleTerms = () => {
      const selectedString = sel.value,
        show = selectedString == "1" || selectedString == "2";
        terms.classList.toggle("hide", !show)
      if (show) checked.setAttribute("required", "required");
      else checked.removeAttribute("required");
      console.log(show)
    };
  sel.addEventListener("change", toggleTerms)
  toggleTerms(); // initialise
});
.hide {
  display: none;
}
<form action="process_affiliate.php" method="post">
  <select name="InquiryType" required="">
    <option value="">Please Select Your Inquiry Type</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div id="terms_target" class="hide">
    <input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
  </div>
  <input type="submit" value="Submit">
</form>
We are here to answer your question about Javascript – Toggle html5 required=“” attribute based on form selection - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji