Cara Membuat Dynamic Form Field Keren Dengan Bootstrap

Cara Membuat Dynamic Form Field Keren Dengan Bootstrap - kali ini kita akan membuat dynamic form field dengan boostrap. Dynamic form field adalah jumlah field yang dinamis dalam form yang dapat di tambah maupun di kurangi atau di hapus sehingga user dapat memasukan data sesuai kebutuhan dalam satu form. Dengan menggunakan bantuan javascript dan jquery kita dapat membuat dynamic form field dengan cara menduplikat field. Untuk lebih jelasnya langsung saja kita ke parkateknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Bootstrap

Pertama buatlah sebuah folder dengan nama Dynamic_field. Kemudian download bootstrap di situs resminya di sini : DOWNLOAD

Extrak folder CSS dan fonts ke dalam folder Dynamic_field.

jQuery

Buat sebuah folder dengan nama js dama folder Dyanamic_field. kemudian download jquery terlebih dahulu di situs resminya di sini : DOWNLOAD

Letakan dalam folder Js

Javascript

Sekarang untuk javascriptnya buat sebuah file javascript baru dalam folder js dengan nama script.js dengan isi script :

$(function()
   {
    $(document).on('click', '.btn-add', function(e)
    {
  e.preventDefault();

  var controlForm = $('.controls:first'),
   currentEntry = $(this).parents('.entry:first'),
   newEntry = $(currentEntry.clone()).appendTo(controlForm);

  newEntry.find('input').val('');
  controlForm.find('.entry:not(:last) .btn-add')
   .removeClass('btn-add').addClass('btn-remove')
   .removeClass('btn-success').addClass('btn-danger')
   .html('<span class="glyphicon glyphicon-minus"></span>');
    }).on('click', '.btn-remove', function(e)
    {
  $(this).parents('.entry:first').remove();

  e.preventDefault();
  return false;
    });
   }
  );

Pehatikan pada baris kode ini :

.on('click', '.btn-add', function(e)

Script ini bertujuan apabila terdapat event klik pada class button add yaitu tombol plus. maka lakukan fungsinya.

newEntry = $(currentEntry.clone()).appendTo(controlForm);

Inilah script yang kita gunakan untuk mengkloning filed yang sebelumnya kemudian meletakkannya di bawah dengan fungsi appendTo ke dalam kelas controll.

Perhatikan baris kode ini :

.on('click', '.btn-remove', function(e)

Script ini bertujuan apabila terdapat event klik pada class button remove yaitu tombol plus. maka lakukan fungsinya.

$(this).parents('.entry:first').remove();

Script ini yang digunakan untuk menghapus field yang di klik.

HTML

Terakhir untuk markupnya buatlah sebuah file HTML baru dalam folder Dynamic_form dengan nama index,html dengan isi script :

<!doctype html>
<html lang="en">
<head>
 <title>Membuat Dynamic Field Keren Dengan Bootsrtap | Jin Toples Programming</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .entry{
   margin-top:10px;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .form-control{
   border-radius:0px;
  }
  
  .btn {
   border-radius:0px;
  }
 </style>
 <script src="js/jquery-1.8.3.js"></script>
 <script src="js/script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Dynamic Field Keren Dengan Bootsrtap</h1>
  <form action="#" method="post">
   <div class="controls"> 
    <div class="form-group">
     <div class="entry input-group">
      <input class="form-control" name="data[]" type="text" placeholder="Entry..." required>
      <span class="input-group-btn">
       <button class="btn btn-success btn-add" type="button">
        <span class="glyphicon glyphicon-plus"></span>
       </button>
      </span>
     </div>
      </div>
   </div>
  </form>
 </div>
</body>
</html>

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Kali ini kita hanya akan membuat formnya saja untuk artikel selanjutnya kami akan membahas bagaimana cara menyimpan dynamic form field ini ke dalam database.

Baca di sini : Cara Menyimpan Data Dynamic Form Field Dalam Database

Dynamic Form Field Keren Dengan Bootstrap anda sekarang sudah selesai, baca juga tutorial program HTML dan jQuery lainnya.