Toto Prayogo

Toto Prayogo

Dynamic Form #1

Sedang melakukan maintenance untuk aplikasi pencatatan data penjualan menggunakan PHP dengan kombinasi jQuery dan plugin lainnya. Dynamic Field Form ini sangat dibutuhkan untuk pencatatan apabila data barang lebih dari satu pada setiap transaksi. Berikut kode sederhana dan ulasannya.

Code Sample

Setelah membuat yang namanya elemen utama atau elemen baku, selanjutnya kita bangun sebuah elemen pembantu yang siap diduplikasi. Sebagai contoh, elemen baku seperti berikut (ingat, kode sample ini menggunakan Bootstrap, jadi jangan lupa custom ke elemen mu sendiri ya):

 <div id="form">
  <div class="row">
   <div class="col-sm-3">
    <input type="text" class="form-control" name="nameText[]" />
   </div>
   <div class="col-sm-3">
    <button type="button" class="btn btn-primary addBtn">Add</button>
   </div> 
  </div>
  <div class="row" id="submit">
   <div class="col-xs-2">
    <button type="button" class="btn btn-primary">Sumbit</button>
   </div>
  </div>
 </div>


Sedangkan untuk elemen pembantu yang siap dicopy (duplikat) sebagai berikut:

 
 <div class="row hide clone" id="duplikat">
  <div class="col-sm-3">
   <input type="text" class="form-control" name="nameText[]" />
  </div>
  <div class="col-sm-3">
   <button type="button" class="btn btn-primary delBtn">Del</button>
  </div> 
 </div>

Bila semua sudah, kita hanya perlu mengatur menggunakan jQuery agar dynamic form ini dapat berjalan sebagaimana mestinya. Untuk kode pada part kali ini menggunakan kode sebagai berikut:

 <script>
  $(document).ready(function() {
   var dataIndex = 0;
   $('#form').on('click', '.addBtn', function() {
    dataIndex++;
    var $template = $('#duplikat'),
     $clone    = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-index', dataIndex)
      .insertBefore($('#submit'));
    // jika ada custom bisa disini
    $clone.end();

   });

   $('#form').on('click', '.delBtn', function() {
    var $row  = $(this).parents('.clone');

    $row.remove();
   });
  });
 </script>

Demo











Yup, segitu dulu ya, besok masih ada cara kedua nya dan mungkin lebih. Terimakasih dan semoga sukses.

Comments