Saya memiliki formulir seperti di bawah ini

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

Pada kode di atas, required ada di service dan capacity. Saya ingin tahu cara menambahkan required ke bidang notes secara otomatis hanya ketika saya memilih opsi Hotspot di bidang service.

Apakah Anda tahu bagaimana melakukan hal itu ?

Terima kasih

0
Ikram Shabri 29 Oktober 2019, 10:47

5 jawaban

Jawaban Terbaik

Anda dapat menambahkan onchange event handler untuk memilih opsi dan sebagai param meneruskan nilai opsi yang dipilih. Dalam hal ini ketika nilainya adalah hotspot, Anda dapat menggunakan setAttribute untuk menambahkan atribut required ke textarea yang lain, setel ke false atau hapus menggunakan removeAttribute. Juga id elemen dom harus unik

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>
1
brk 29 Oktober 2019, 07:58
$('#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>
0
Vpa 29 Oktober 2019, 08:29

Anda dapat mencapai ini menggunakan jQuery. Anda perlu mengatur bidang menjadi wajib pada acara dropdown onChange.

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

Pada contoh di atas, bidang Catatan akan menjadi wajib, jika Anda memilih Fiber in Service Dropdown.

0
Optimum Creative 29 Oktober 2019, 15:09
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>

Pertama-tama, hapus properti display:none dari div pertama. Kemudian periksa kode di atas.

0
dnaz 29 Oktober 2019, 08:06

Periksa contoh sederhana di bawah ini , menggunakan jquery , jika seseorang memilih peran tertentu , alihkan kode kelas dan alihkan properti yang DIBUTUHKAN pada elemen yang dipilih

$('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(){
0
oleevier 29 Oktober 2019, 07:58