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

Advertisements

Ditunggu komennya ...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s