Change required field form when option is selected

Question

I have a form like below

       <form>
        <div class="6 op" style="display: none;">
        <div class="form-group">Service</label>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option></option>
                 <option>Fiber</option>
                 <option>Hotspot</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlInput1">Capacity</label>
              <input type="text" class="form-control" id="formGroupExampleInput" placeholder="example: 1" required>
              <select class="form-control" id="exampleFormControlSelect1" required>
                 <option>Mbps</option>
                 <option>Gbps</option>
              </select>
           </div>
           <div class="form-group">
              <label for="exampleFormControlTextarea1">Notes</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
           </div>
           <input type="submit">
        </div>
     </form>

In the code above, required is in service and capacity . I want to know how to add required to notes field automatically only when I choose Hotspot option in service field.

Do you know how to do that?

Thank you

Answer 1

You can add onchange event handler to select option and as a param pass the value of the selected option. In this case when the value is hotspot you can use setAttribute to add the attribute required to the textarea else set it to false or remove it using removeAttribute . Also id of dom elements need to be unique

 let txtArea = document.getElementById('exampleFormControlTextarea1'); function changeService(val) { if (val.toLowerCase() === 'hotspot') { txtArea.setAttribute('required', true) } else { txtArea.setAttribute('required', false) } }

 <form> <div class="6 op" style=""> <div class="form-group"><label for='exampleFormControlSelect1'>Service</label> <select onchange='changeService(this.value)' class="form-control" id="exampleFormControlSelect1" required> <option></option> <option>Fiber</option> <option>Hotspot</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput2">Capacity</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required> <select class="form-control" id="exampleFormControlSelect2" required> <option>Mbps</option> <option>Gbps</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Notes</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <input type="submit"> </div> </form>

Answer 2

Check this simple example below, using jquery, if someone select specific role, code toggle class and toggle REQUIRED properties on chosen element

$('select#role').change(function(){
    let role = $(this).children("option:selected").val();
    if (role == 0 ){
      $('.detailed').removeClass("detailed");
      $('#employee').prop('required',true);
    }
    else{
      $('#staff').addClass("detailed");
      $('#employee').prop('required',false);
    }
}); // close $('select#role').change(function(){

Answer 3

You can achieve this using jQuery. You need to set the field to required on the onChange event of dropdown.

 // Perform some code on the change event of a dropdown $("#exampleFormControlSelect1").change(function () { var selected = $(this).children("option:selected").val(); // Get selected value and save it in selected variable console.log(selected); if(selected == "Fiber"){ //check the selected value and set the field to required console.log('i am here'); // Set capacity input to required if value if Fiber // $("#capacity").attr('required',true); // Set Notes field to required if value if Fiber $("#exampleFormControlTextarea1").attr('required',true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="6 op"> <div class="form-group">Service</label> <select class="form-control" id="exampleFormControlSelect1" required> <option></option> <option>Fiber</option> <option>Hotspot</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Capacity</label> <input type="text" class="form-control" id="capacity" placeholder="example: 1"> <select class="form-control" id="exampleFormControlSelect1"> <option>Mbps</option> <option>Gbps</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Notes</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <input type="submit"> </div> </form>

In the above example, the Notes field will become required, if you select Fiber in Service Dropdown.

Answer 4

 let el = document.querySelector("#exampleFormControlSelect1"); el.addEventListener("change",(e)=>{ if(el.options[el.selectedIndex].value == "Hotspot" ) { document.querySelector("#exampleFormControlTextarea1").setAttribute("required",""); } else { document.querySelector("#exampleFormControlTextarea1").removeAttribute("required"); } });

 <form> <div class="6 op" style=""> <div class="form-group">Service</label> <select class="form-control" id="exampleFormControlSelect1" required> <option></option> <option>Fiber</option> <option>Hotspot</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Capacity</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required> <select class="form-control" id="exampleFormControlSelect1" required> <option>Mbps</option> <option>Gbps</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Notes</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> <input type="submit"> </div> </form>

First of all, remove the display:none property from first div. Then check the codes above.

Answer 5

 $('#serviceToggle').on('change', function () { var data = $(this).val(); if (data == 'hotspot') { $('#notes').prop('required', true); } else { $('#notes').prop('required', false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="form-group"> <label for="serviceToggle">Service</label> <select class="form-control" id="serviceToggle" required> <option></option> <option value="fiber">Fiber</option> <option value="hotspot">Hotspot</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Capacity</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1"> <select class="form-control" id="exampleFormControlSelect1" required> <option>Mbps</option> <option>Gbps</option> </select> </div> <div class="form-group"> <label for="notes">Notes</label> <textarea class="form-control" id="notes" rows="3"></textarea> </div> <input type="submit" value="Submit"> </form>