Facebook Ilmuwebsite

JQuery Case: Meload Konten Ke dalam Select Form Hasil dari Pemilihan Select Form Sebelumnya

Salam, kita akan kembali membahas tutorial ajax, atau teknik ajax yang lainnya.

Kali ini pembahasan lebih kepada studi kasus yang biasanya hampir ada di setiap aplikasi berbasis website. Baik itu menggunakan database maupun tidak.

Seperti apa kasusnya? Kita akan bahas saat ini juga.

Pernahkah Anda bertemu dengan form isian yang mengharuskan Anda memilih option berbentuk form dropdown, yang ketika Anda memilih form dropdown tersebut mempengaruhi isi dari form drop down selanjutnya.

Seperti apa contohnya?

Saya akan ambil contoh kasus website karya kawan lama yakni Brilianth, yang sebelumnya telah menulis beberapa artikel di ilmuwebsite magz v1, yakni brilianth a.k.a peterpanz yakni mangpulsa.com.



Jika dilihat pada form di atas, Anda belum bisa memilih jenis provider jika Anda belum memilih jenis produk pada form pilihan sebelumnya. Namun jika Anda telah memilih jenis produk, maka pastinya Anda sudah langsung bisa memilih jenis providernya.

Lalu bagaimana cara kerjanya, algoritma dan kode di balik itu semua? Itu yang akan kita bahas selengkapnya.

Ada beberapa macam solusi yang bisa Anda gunakan, mulai dari menggunakan dom biasa, hingga menggunakan ajax yang mengambil data dari suatu url. Untuk pembahasan kali ini kita hanya akan menggunakan DOM Java Script saja, menggunakan JQuery.

Script lengkapnya sebagai berikut :
 <html>
  <head>
   <title>DOM AJAX</title>
   <style type="text/css">
    label{
     display:inline-block;
     width:100px;    
    }
    
    select{
     padding:10px;
     margin:0 0 10px 0;
     width:200px;
    }
    
    input[type="submit"]{
     padding:10px;
     width:200px;
     margin-left:100px;
    }
    
    h3.harga{
     display:inline-block;
    }
   </style>
  </head>
  <body>
   <h1>Form Beli/Order</h1>
   <label>Jenis Provider</label><select name="provider" id="provider"><option>Pilih Provider</option></select><br />
   <label>Produk</label><select name="produk" id="produk"><option>Pilih Produk</option></select><br /> 
   <label>Nominal</label><select name="nominal" id="nominal"><option>Pilih Nominal</option></select><br />
   <label>Harga</label><h3 class="harga">Rp 0</h3><br />
   <input type="submit" name="kirim" value="Kirim!" />
     
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     
     /* persiapkan terlebih dahulu array berbentuk 
     objek sesuai dengan kebutuhan*/
     var obj = {
      'Pulsa Telepon' : {
       'AS' : {
          'AS 5000' : '6425',
          'AS 1000' : '11500'
        },
       'AXIS' : {
          'AXIS 5000' : '6100',
          'AXIS 1000' : '11800'
        }
      },
      'Token PLN' : {
       'PLN Prabayar' : {
          'Voucher PLN 20000' : '19600',
          'Voucher PLN 25000' : '24600'
        }
      }
     };
     
         
     /* hapus isi option provider, 
     hal ini digunakan sebagai antisipasi duplikasi 
     isi/nilai dari option si provider nantinya */
     $('#provider option').remove();
     
     /* tambahkan ke dalam provider pilihan Pilih Provider */
     $('#provider' ).append('<option value="">Pilih Provider</option>');
     
     /* ambil isi dari obj kemudian keluarkan dengan looping */
     jQuery.each( obj, function( i, val ) {
      $('#provider' ).append('<option value="'+i+'">'+i+'</option>');
     });   
     
     
     /* jika provider dipilih */
     $('#provider').change(function(){
      var valprovider = $(this).val();
      $('h3.harga').html('Rp 0');
          
      /* hapus isi option produk, 
      hal ini digunakan sebagai antisipasi duplikasi 
      isi/nilai dari option si produk nantinya */
      $('#produk option').remove();
      
      $('#produk' ).append('<option value="">Pilih Produk</option>');
      jQuery.each( obj[valprovider], function( i, val ) {
       $('#produk' ).append('<option value="'+i+'">'+i+'</option>');
      });      
     });
     
     
     /* jika produk dipilih */
     $('#produk').change(function(){ 
      var valproduk = $(this).val();
      var valprovider = $('#provider').val(); 
      $('h3.harga').html('Rp 0');     
      
      /* hapus isi option nominal, 
      hal ini digunakan sebagai antisipasi duplikasi 
      isi/nilai dari option si nominal nantinya */
      $('#nominal option').remove();
      $('#nominal' ).append('<option value="">Pilih Nominal</option>');
      jQuery.each( obj[valprovider][valproduk], function( i, val ) {
       $('#nominal' ).append('<option value="'+i+'">'+i+'</option>');
      }); 
      
     });
     
     
     $('#nominal').change(function(){     
      var valnominal = $(this).val();
      var valprovider = $('#provider').val(); 
      var valproduk = $('#produk').val();     
      
      /* di reset jadi nol */
      $('h3.harga').html('Rp '+obj[valprovider][valproduk][valnominal]);
      
     });
        
    });
          
   </script>
  </body>
 </html>

Untuk demo silahkan klik http://www.ilmuwebsite.com/tutorial/jquery/trigger/

Semoga bermanfaat,

Loka Dwiartara
Founder KaffahBiz
Founder ICC
Admin Ilmuwebsite.com

Posting Komentar

1 Komentar