Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker

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