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 ComboBox Terpilih di Aplikasi Web dari PHPMaker
Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker

Menampilkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker

Sab, 12 Juli 2014 oleh Masino Sinaga 19 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! πŸ™‚

Ditempatkan di bawah: PHPMaker Ditag dengan:Client Scripts, hide, PHPMaker Indonesia, Radio Button, show, TextBox, Tutorial PHPMaker, val

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.

Menampilkan TextBox Saat ComboBox Terpilih di Aplikasi Web dari PHPMaker
Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker

Komentar

  1. Wiradarma mengatakan

    Sel, 15 Juli 2014 pada 7:34 pm

    Mau tanya Startup Script nya dimana itu berada yah , kok tidak ada dibagian add/copy nya
    trimakasi…

    Balas
    • Masino Sinaga mengatakan

      Rab, 16 Juli 2014 pada 8:53 am

      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. firman mengatakan

    Rab, 16 Juli 2014 pada 11:52 am

    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
    • Masino Sinaga mengatakan

      Rab, 16 Juli 2014 pada 1:23 pm

      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
    • Masino Sinaga mengatakan

      Rab, 16 Juli 2014 pada 1:37 pm

      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. firman mengatakan

    Kam, 17 Juli 2014 pada 9:44 am

    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
    • Masino Sinaga mengatakan

      Kam, 17 Juli 2014 pada 9:59 am

      Buat terlebih dulu dua View di dalam database dengan field-field yang diinginkan. Selanjutnya gunakan kedua View tadi untuk kedua menu tersebut.

      Balas
  4. firman mengatakan

    Rab, 30 Juli 2014 pada 6:02 pm

    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
    • Masino Sinaga mengatakan

      Rab, 30 Juli 2014 pada 11:04 pm

      Itu kan sama dengan kode yang terdapat di artikel: Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker.

      Balas
  5. Nanda mengatakan

    Sel, 10 Januari 2017 pada 11:41 am

    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
    • Nanda mengatakan

      Sel, 10 Januari 2017 pada 11:51 am

      ooh, yg ini sudah bisa Bang Masino.
      saya coba bongkar Script File nya ternyata harus ditambahkan ini : $(β€˜#sv_x_NamaMhs’).
      Terimakasih.

      Balas
      • Masino Sinaga mengatakan

        Sel, 10 Januari 2017 pada 4:38 pm

        Sama-sama.

        Balas
  6. Dendi mengatakan

    Sen, 20 September 2021 pada 4:51 pm

    maaf bang Masino, di PHP Maker 2021 kok sudah engga berfungsi ya,
    apa ada kode yang harus diganti ?

    Balas
    • Masino Sinaga mengatakan

      Rab, 22 September 2021 pada 12:48 pm

      Coba tekan tombol F12 dari browser, lalu cek apakah ada error Javascript dari bagian Console.

      Balas
      • Dendi mengatakan

        Jum, 24 September 2021 pada 10:29 am

        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
        • Masino Sinaga mengatakan

          Sel, 28 September 2021 pada 10:45 am

          Kode saat event click bisa di-post sekalian?

          Balas
          • Dendi mengatakan

            Sel, 28 September 2021 pada 2:43 pm

            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
            • Masino Sinaga mengatakan

              Sel, 28 September 2021 pada 3:28 pm

              Sepertinya karena itu. Coba disesuaikan kodenya, bungkus dengan:

              loadjs.ready("load", function() {
              ...
              });
              
              Balas
              • Dendi mengatakan

                Sel, 28 September 2021 pada 3:51 pm

                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

Tinggalkan Balasan Batalkan balasan

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

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

Pos-pos Terbaru

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024
  • Mudahnya Mengunci Record dengan Javascript Count Down di PHPMaker 2023
  • Ini Alasan Kenapa Kalian Harus Beralih ke PHP 8

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download! – Masino Sinaga pada Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Custom Domain URL di Masino Extensions untuk PHPMaker 2020
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Membatasi Akses Versi Live dan Versi Development Aplikasi Web dari PHPMaker
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Nomor Urut Record di Export Data pada PHPMaker 2020 dan PHPMaker 2021
  • Masino Sinaga pada Review PHPMaker 2024

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2023 | WordPress | Catat masuk | Kembali ke atas