Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menampilkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker

Menampilkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker

oleh 23 Komentar

Masih ingat dengan artikel Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker? Artikel itu membahas bagaimana mudahnya Web Developer menerapkan business-logic di sisi browser. Contohnya, kita dapat mengaktifkan atau menonaktifkan control TextBox berdasarkan nilai yang terpilih di control Radio Button.

Di artikel berikut ini kita akan membahas contoh yang sama dengan yang terdapat di artikel tersebut. Tapi, kali ini kita akan menampilkan atau menyembunyikan control TextBox daripada mengaktifkan atau menonaktifkannya. Oleh karena itu, pastikan tipe control field AndaMhs sudah menggunakan tipe Radio Button 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]:radio:checked').val()=="Y"){
        $('#r_NamaMhs').show();
    } else {
        $('#r_NamaMhs').hide();
    }
    // Kondisi saat Radio Button diklik
    $('input[name=x_AndaMhs]:radio').click(function(){
        if($(this).attr("value")=="N"){
            $('#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.

Uhuuuuyyy… betapa mudahnya membangun Aplikasi Web dengan menggunakan PHPMaker! 🙂

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Komentar

    • Pastikan terlebih dulu klik salah satu tabel yang diinginkan dari panel Database di sebelah kiri, lalu klik di panel kanan tab yang bernama Code (Server Events, Client Scripts and Custom Templates), kemudian browse ke lokasi ini: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script.

      Balas

  2. script nya sudah saya coba dan bisa cuma ini ada sedikit masalah
    kan saya buat 2 radio button nah satu ya (value nya “Y” )satu tidak (valuenya “N”)
    pas saya klik ya atau tidak tetap keluar field yang di hide tadi
    gimana cara nya agar kalau di klik Y kemudian keluar field nya klo tidak field nya akan hilang.

    script saya:

    // Write your table-specific startup script here
// document.write("page loaded");       
$(document).ready(function() {
    // Kondisi saat Form di-load
    if($('input[name=x_soal3]:radio:checked').val()=="Y"){
        $('#r_soal4').show();
    }  
    else
    {
        $('#r_soal4').hide();
    }
    // Kondisi saat Radio Button diklik
    $('input[name=x_soal3]:radio').click(function(){
        if (!$(this).is(':checked')) {
            $('#x_soal4').val('');
            $('#r_soal4').hide(); 
        } else {
            $('#r_soal4').show();
            $('#x_soal4').focus();
        }
    });
});

    terima kasih

    Balas

    • Biasanya hal ini terjadi karena file english.xml atau .xml bahasa lainnya untuk menampilkan teks dalam bahasa tertentu belum di-generate atau belum di-upload ke web server.

      Pastikan Anda sudah men-generate semua file script, termasuk yang terdapat di bagian Other files pada jendela dialog Generate.

      Balas

    • Setelah saya cek, ternyata Anda benar. Ada satu baris kode yang salah.

      Ganti:

              if (!$(this).is(':checked')) {

      menjadi:

              if($(this).attr("value")=="N"){

      Terima kasih sudah mengingatkan. 🙂

      Balas

  3. dah bisa mas terima kasih

    oh iya mau tanya sekalian .
    saya punya tabel mahasiswa dengan field (id, NIS, nama, alamat,)
    kemudian saya punya 2 menu tapi dalam 1table . 1 menu menampilkan nis dan nama menu ke 2 menampilkan semua gimana mas caranya

    Balas

  4. mas sinaga mau tanya lagi nih… 😀

    saya punya masalah gini :

    ada beberapa pilihan check box dan salah satu check box nya adalah other dimana harus di isi manual gimn mas caranya biar bisa kayak begitu

    terimakasih …

    Balas

  5. saya coba pakai versi 2017 kok ga bisa Focus ke NamaMhs ya … ?
    untuk Text Muncul dan hilang nya sudah bisa, cuma ketika di Klik Radio ‘AndaMhs’ tidak bisa Focus ke Text ‘NamaMhs’

    apakah ada perubahan kode disini : $(‘#x_NamaMhs’) ??

    Balas

      • sudah dicek di bagian ini:

        if($('input[name=x_soal3]:radio:checked').val()=="Y"){
    $('#r_soal4').show();
} else {
    $('#r_soal4').hide();
}

        berfungsi dengan baik (saat diload pertama kali).

        tapi saat diklik masih belum ada perubahan.

        Balas

          • Terimakasih Bang Masino, saya coba buat Tabel :

            CREATE TABLE `soal` (
  `id` int(11) NOT NULL,
  `pilihan` varchar(10) NOT NULL,
  `jawab1` varchar(30) NOT NULL,
  `jawab2` varchar(30) NOT NULL,
  `jawab3` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

            Setting Field “pilihan” di Project menggunakan Radio Button dengan 3 pilihan (1,2,3) akan memunculkan Textbox Jawab(1,2,3) sesuai pilihan.

            untuk Kode selengkapnya :

            // Write your table-specific startup script here, no need to add script tags.
$(document).ready(function() {
    // Kondisi saat Form di-load
    if($('input[name=x_pilihan]:radio:checked').val()=="1"){
        $('#r_jawab1').show();
        $('#r_jawab2').show();
        $('#r_jawab3').show();
    }  
    else
    {
       $('#r_jawab1').hide();
       $('#r_jawab2').hide();
       $('#r_jawab3').hide();
    }
    // Kondisi saat Radio Button diklik
   $('input[name=x_pilihan]:radio').click(function(){
        if($(this).attr("value")=="1"){
            $('#r_jawab1').show();
            $('#x_jawab1').focus();
            $('#r_jawab2').hide();
            $('#R_jawab3').hide();
        } else if($(this).attr("value")=="2"){
            $('#r_jawab1').hide();
            $('#r_jawab2').show();
            $('#x_jawab2').focus();
            $('#x_jawab3').hide();
        } else if($(this).attr("value")=="3"){
            $('#r_jawab1').hide();
            $('#r_jawab2').hide();
            $('#x_jawab3').show();
            $('#x_jawab3').focus();
        }
    });
});

            dari kode diatas, saat Form di Load sudah berhasil menyembunyikan ketiga Textbox, tetapi saat Radio di klik tidak ada perubahan.

            ooh iya bang, kalau saya lihat di dalam File nya ada sedikit perubahan dari Versi sebelumnya (yang pernah saya pakai), yaitu :

            loadjs.ready("load", function () {
.................................. // statrup Script ditampilkan disini

            apakah karena itu ya ?

            Balas

              • ini saya coba tambahkan kode tersebut, dan saya coba hilangkan juga masih belum ada perubahan.

                dan saya juga utak atik (hilangkan dan tambahkan) Kode pembuka ini 

                $(document).ready(function() {
...
}

                masih sama belum ada perubahan, malah perubahan terjadinya pada saat di Load (Textbox muncul semua)

                Balas

  7. Siang Pak Masino,

    Pak nanya, bila kondisinya radio buttonnya itu selain Yes/No gimana ya Pak?
    misal opsi radio buttonnya ada Pedapatan dan Pengeluaran.

    mohon dicontohkan ya Pak 🙏🏻🙏🏻🙏🏻

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses