Masih ingat dengan artikel sebelumnya Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker yang membahas mengenai betapa mudahnya Anda sebagai Web Developer menambahkan kode untuk menerapkan business-logic yang dijalankan di sisi browser Pengguna? Di artikel tersebut, Anda dapat mengaktifkan TextBox tertentu berdasarkan status CheckBox di atasnya yang tercentang.
Nah, di artikel berikut ini kita masih membahas contoh kasus yang sama. Tapi kali ini kita menggunakan control Radio Button, menggantikan control CheckBox. Untuk menerapkan hal ini, maka Anda cukup mengganti tipe control field AndaMhs dari yang sebelumnya CheckBox menjadi Radio Button melalui menu: Fields setup -> Edit Tag pada project PHPMaker yang bertalian.
Sedangkan untuk kode yang sebelumnya terdapat di Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script dan Client Scripts -> Table-Specific -> Edit Page -> Startup Script (jika ada), silahkan diganti masing-masing menjadi seperti yang di bawah ini:
$(document).ready(function() {
// Kondisi saat Form di-load
if($('input[name=x_AndaMhs]:radio:checked').val()=="Y"){
$('#x_NamaMhs').removeAttr('disabled');
} else {
$('#x_NamaMhs').attr('disabled','disabled');
}
// Kondisi saat Radio Button diklik
// $('input[type="radio"]').click(function(){
$('input[name=x_AndaMhs]:radio').click(function(){
if($(this).attr("value")=="N"){
$('#x_NamaMhs').attr('disabled','disabled');
$('#x_NamaMhs').val('');
} else {
$('#x_NamaMhs').removeAttr('disabled');
$('#x_NamaMhs').focus();
}
});
});
Terakhir, jangan lupa men-generate ulang semua file scripts, lalu jalankan ulang Aplikasi Web tersebut melalui browser untuk mencoba hasilnya.
Dalam contoh kode tadi, kita hanya cukup mengubah dua baris kode saja (silahkan Anda bandingkan sendiri dengan contoh kode yang terdapat di artikel sebelumnya).
Karena sekarang kita menggunakan control Radio Button, maka pemeriksaan kondisi menggunakan nilai pilihan control Radio Button yang terpilih; apakah N atau Y. Jika nilai yang terpilih adalah N, maka TextBox di bawahnya akan non-aktif atau disabled, sebaliknya jika yang terpilih adalah Y, maka TextBox di bawahnya menjadi aktif atau enabled.
Betapa mudahnya menerapkan business-logic dari sisi browser Pengguna pada Aplikasi Web yang dihasilkan oleh PHPMaker, bukan? 🙂
Sore Master Masino,
untuk tips “Mengaktifkan TextBox Saat Radio Button Terpilih” sudah di test dan bisa berjalan lancar.
Tapi untuk yang “Mengaktifkan TextBox Saat CheckBox Tercentang” terjadi masalah yaitu ketika fitur Confirm saya aktifkan. Data yang yang sudah saya isikan pada TextBox, ketika tombol confirm saya klik, malah membuat data pada Textbox hilang. Lalu saya cek ulang dengan melihat pada List Page dan ternyata memang benar data pada TextBox hilang, yang ada hanya ada data hasil centangan CheckBox.
Bisa tolong di cek Master?? Apa ada yang salah ya di saya??
Tinggal hapus saja baris kode yang ini:
$('#x_NamaMhs').val('');