Jquery select on change function

Kali ini bermain main dengan jquery select on change, bermain main dengan jquery itu ternyata menyenangkan juga, baru kali ini mulai belajar belajar lagi jquery. Kali ini saya ingin sharing tentang cara bagaimana bermain main dengan form dengan jquery, kali ini saya menggabungkan fungsi select dan input, jadi ketika kita memilih select option tertentu maka akan mempengaruhi input box dalam hal ini saya menggunakan class yang sudah ada di html yaitu class required dan disabled, langsung saja kira kira seperti ini scriptnya.

Pertama tama tentu saja kita sudah memastikan jquery sudah terload

https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js

Selanjutnya adalah membuat select dan input di html

<select id="metode" required name="metode" class="form-control">
 <option value="Cash">Cash</option>
 <option value="Debit">Debit</option>
 <option value="Kredit">Kredit</option>
</select>

 <select name="bank" id="bank" disabled class="form-control">
 <option value="">Pilih Bank</option>
 <option value="Mandiri">Mandiri</option>
 <option value="Danamon">Danamon</option>
 <option value="BRI">BRI</option>
 <option value="BNI">BNI</option>
 <option value="BCA">BCA</option>
 <option value="Bukopin">Bukopin</option>
 <option value="CIMB Niaga">CIMB Niaga</option>
 <option value="Mayapada">Mayapada</option>
 <option value="Muamalat">Muamalat</option>
 <option value="BTN">BTN</option>
 </select>

 <input id="kartu" name="kartu" disabled placeholder="Nomor Kartu" class="form-control" type="text">

Disini saya membuat contoh aplikasi metode pembayaran jadi  ketika user memilih debit/ kredit maka dia wajib memasukkan nomor kartu dan memilih nama bank, kalau diperhatikan saya mendisabled secara default pilihan nama bank dan nomor kartu karena secara default ketika reload pilihan pertama adalah jenis pembayaran cash dimana tidak perlu memilih nama bank dan nomor kartu,

Oke selanjutnya adalah script jquerynya

$(document).ready(function(){

$('#metode').on('change', function() {

 if (this.value == "Debit") {
 // alert ("debit");
 $('#kartu').attr('required',true);
 $('#bank').attr('required',true);
 $('#kartu').attr('disabled',false);
 $('#bank').attr('disabled',false);
 console.log("debit");
 }
 else if (this.value == "Kredit") {

 $('#bank').attr('required',true);
 $('#kartu').attr('required',true);
 $('#kartu').attr('disabled',false);
 $('#bank').attr('disabled',false);
 console.log("kredit");
}
 else {
 $('#kartu').attr('required',false);
 $('#bank').attr('required',false);
 $('#kartu').attr('disabled',true);
 $('#bank').attr('disabled',true);

console.log("cash");

}

})
});

Selesai jadi fungsi ini akan menjalankan fungsi seperti ini, ketika user memilih cash maka fungsi akan mendisabled pilihan nama bank dan input nomor kartu, dan ketika user memilih debit/kredit maka fungsi memilih kartu akan aktif dan menjadi fungsi required sehingga user wajib memilih jenis bank dan nomor kartu

Advertisement