Langsung ke konten utama

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.

Postingan populer dari blog ini

Cara menggunakan mifi

Kebutuhan akses internet kian hari kian menjadi sebuah kebutuhan primer. Kita bagaikan tidak dapat hidup tanpa keberadaan internet itu sendiri. Bahkan mungkin ada orang diluaran saya yang rela tidak makan demi akses internet. Berikut ini akan saya jelaskan pilihan mifi 4G All operator yang terbaik untuk digunakan.Apa itu mifi?Mi-Fi (baca: mifi) adalah kependekan dari Mobile Wi-Fi. Yang namanya mobile sudah pasti dapat dibawa kemana-mana dan sangat fleksibel selayaknya mobile phone yang biasa kita genggam kemana-mana. Mifi sendiri berfungsi layaknya router yang berfungsi memancarkan/menyebarkan sinyal untuk selanjutnya dapat kita gunakan untuk berselancar didunia maya.
Sebenarnya sudah jelas apa itu mifi, dan sepatutnya tidak timbul pertanyaan lebih bagusan mana antara wifi atau mifi?
Sedangkan untuk pertanyaan tentang perbedaan wifi dan mifi kalian sebagai pembaca sudah lebih paham dari mengartikan kata Mobile Wi-fi diatas.Pilihan modem mifi GSMMiFi Huawei E5577CGambar diatas adalah Mi-…

Membuat Random Words dengan Codeigniter

Sejak helperrandom_element() hadir, semua custom function mulai di-migrasi. Semua koding tidak memerlukan keahlian khusus, hanya perlu logika. Termasuk dengan generator random words yang sangat dibantu oleh kehadiran fungsi ini.IntroGenerator Random Words adalah satu yang ingin saya bagikan. Di-Codeigniter sendiri sudah hadir yang namanya random_string() yang menghasilkan string acak. Sedangkan kali ini ingin berbagi dengan kata acak yang dapat diaplikasikan untuk helper seperti captcha. Cara ini sudah saya terapkan pula untuk captcha bawaan dari CI untuk beberapa proyek web.The StepsLangkah untuk membuat random word ini cukup mudah, hanya persiapkan database yang ada, tentu yang sudah ada artikelnya agar kata acaknya keluar sesuai konten yang ada. Daripada mencari api yang menyediakan kata acak dan tentu berbayar.
Untuk kasus ini, anggap saja kita memiliki DB dengan table bernama 'news' dengan kolom 'articles'. Dengan bantuan random_element() akan memuluskan fungsi gen…

Cara mudah membuat fungsi Unique Slug pada codeigniter

Membuat URL demi meningkatkan SEO itu ternyata penting, jika suatu web/blog yang kita bangun tersebut ingin dikenal oleh publik karena kita publikasikan. Dalam kasus ini adalah membuat URL (slug) unik pada Codeigniter. Beberapa cara singkat akan diulas dalam artikel ini.IntroTidak perlu menguasai ilmu tinggi, kita hanya perlu sedikit logika saja agar URL yang kita buat menggunakan CI lebih unik. Dan cara yang dapat kita terapkan semua dapat kita ambil dalam dokumentasi CI tersebut. Ada beberapa cara yang dapat saya ulas untuk Anda, dan cara-cara ini juga yang sering saya terapkan pada banyak projek web saya.The StepsAgar URL menjadi cantik, kita gunakan helperurl_title() yang telah disediakan CI. Fungsi ini sangat membantu, jadi kita tak perlu lagi membuat fungsi baru agar URL cantik.Encrypt SlugCara ini paling dasar, saya sering menggunakan cara ini karena malas otak-atik terlalu dalam. Saya biasa menyimpan slug dengan cara ini. Efektif dan sangat mudah. Caranya dengan menggunakan f…