CODEWITHSUNDEEP
javascriptjqueryhtml
Ikram Shabri
Ikram Shabri

Reputation: 567

Change required field form when option is selected

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

Upvotes: 0

Views: 83

Answers (5)

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

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.

Upvotes: 0

Vpa
Vpa

Reputation: 737

$('#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>

Upvotes: 0

dnaz
dnaz

Reputation: 376

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.

Upvotes: 0

oleevier
oleevier

Reputation: 164

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(){

Upvotes: 0

brk
brk

Reputation: 50316

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>

Upvotes: 1

Related Questions