Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker

Jika Anda sudah pernah membaca artikel Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker yang membahas mengenai betapa mudahnya Anda sebagai Web Developer mengaktifkan control TextBox berdasarkan event atau nilai yang terpilih di control CheckBox, maka di artikel yang ini kita akan membahas bagaimana mudahnya Anda menampilkan atau menyembunyikan elemen TextBox tersebut daripada mengaktifkan atau menonaktifkannya.

Supaya lebih mudah, maka kita menggunakan contoh kasus yang sama dengan yang terdapat di artikel di atas tadi. Untuk itu, pastikan tipe control field AndaMhs sudah menggunakan tipe CheckBox melalui menu: Fields setup -> Edit Tag pada project PHPMaker yang bertalian.

Sedangkan untuk kode yang sebelumnya terdapat pada bagian Startup Script yang masing-masing berada di bawah lokasi 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[]']:checked").val()){
		$('#r_NamaMhs').show();
	} else {
		$('#r_NamaMhs').hide();
	}
	// Kondisi saat CheckBox diklik
	$('input:checkbox[name="x_AndaMhs\[\]"]').click(function() {
		if (!$(this).is(':checked')) {
			$('#x_NamaMhs').val('');
			$('#r_NamaMhs').hide();
		} else {
			$('#r_NamaMhs').show();
			$('#x_NamaMhs').focus();
		}
	});
});

PHPMaker akan menambahkan id untuk setiap baris record dengan menggunakan awalan (prefix) r_ yang diikuti dengan nama Field yang bertalian. Dalam contoh kode tadi, maka untuk menyembunyikan control Label beserta TextBox untuk field NamaMhs, maka kita menggunakan nama r_NamaMhs.

Hehehe…, luar biasa banyaknya kemudahan yang sudah disediakan oleh PHPMaker, ya? 🙂