Mengaktifkan TextBox Saat ComboBox Terpilih di Aplikasi Web dari PHPMaker

Di dua artikel sebelum ini kita sudah membahas mengenai betapa mudah dan cepatnya Web Developer dapat menambahkan kode untuk menerapkan business-logic yang dijalankan di sisi browser pada Aplikasi Web yang dihasilkan oleh PHPMaker. Di kedua contoh tersebut kita menggunakan masing-masing control CheckBox dan Radio Button untuk mengaktifkan maupun menonaktifkan control TextBox yang berada di bawahnya.

Di artikel yang ini kita masih akan membahas contoh yang digunakan di kedua artikel tersebut. Kali ini kita menggunakan control ComboBox. Untuk itu, Anda harus menyesuaikan tipe control field AndaMhs dari yang sebelumnya CheckBox atau Radio Button menjadi Select atau sering dikenal dengan istilah ComboBox 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 ($("#x_AndaMhs").val() == "Y") {
        $('#x_NamaMhs').removeAttr('disabled');
    } else {
        $('#x_NamaMhs').attr('disabled','disabled'); 
    }
    // Kondisi saat ComboBox (Select Option) dipilih nilainya
    $("#x_AndaMhs").change(function() {
        if (this.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 ComboBox, maka pemeriksaan kondisi menggunakan nilai pilihan control ComboBox 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? 🙂