Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus secara dinamis kadang sangat dibutuhkan dalam beberapa kasus. Kali ini saya akan berbagi bagaimana membuat form dinamis yang dapat di duplikasi dan dihapus sesuka kita.

Membuat Duplikasi Form dengan Jquery (Dynamic Form)

Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus secara dinamis kadang sangat dibutuhkan dalam beberapa kasus. Kali ini saya akan berbagi bagaimana membuat form dinamis yang dapat di duplikasi dan dihapus sesuka kita.

Pertama kita buat sebuah form yang nantinya dapat di duplikasi, buat file index.php dan masukkan kode berikut:

<body>
    <div id="wrapper">
      <form action="#" method="post" id="sign-up_area" role="form">
        <div id="entry1" class="clonedInput">
          <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
          <fieldset>

        <!-- Text input-->
        <div class="form-group">
          <label class="label_fn control-label" for="first_name">Nama Depan:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
          <p class="help-block">This field is required.</p>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="label_ln control-label" for="last_name">Nama Belakang:</label>
          <input id="last_name" name="last_name" type="text" placeholder="" class="input_ln form-control">
        </div>
         <!-- Select Basic -->
        <label class="label_ttl control-label" for="title">Jenis Kelamin:</label>
        <div class="form-group">
            <select class="select_ttl form-control" name="title" id="title">
              <option value="" selected="selected" disabled="disabled">Pilih jenis kelamin</option>
              <option value="LK">Laki-laki</option>
              <option value="PR">Perempuan</option>
              
            </select> <!-- end .select_ttl -->
          </div>
          <!-- Multiple Checkboxes (inline) -->
        <label class="label_checkboxitem control-label" for="checkboxitem">Status</label>
        <div class="input-group form-group">
          <label class="checkbox-inline" for="checkboxitem-0">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-0" value="1">
            Single
          </label>
          <label class="checkbox-inline" for="checkboxitem-1">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-1" value="2">
            Menikah
          </label>
          <label class="checkbox-inline" for="checkboxitem-2">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-2" value="3">
            Janda
          </label>
          <label class="checkbox-inline" for="checkboxitem-3">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-3" value="4">
            Duda
          </label>
        </div>
        <!-- Prepended text-->
        <label class="label_twt control-label" for="twitter_handle">Twitter:</label>
        <div class="input-group form-group">
          <span class="input-group-addon">@</span>
          <input id="twitter_handle" name="twitter_handle" class="input_twt form-control" placeholder="" type="text">
        </div>
        <!-- Text input-->
        <div class="form-group">
          <label class="label_email control-label" for="email_address">Email:</label>
          <input id="email_address" name="email_address" type="text" placeholder="contoh: dimas@mail.com" class="input_email form-control">
        </div>
        </div><!-- end #entry1 -->
        <!-- Button (Double) -->
        <p>
        <button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">Tambah form</button>
          <button type="button" id="btnDel" name="btnDel" class="btn btn-danger">Hapus form diatas</button>
        </p>

        <!-- Textarea -->
        <label class="control-label" for="notes">Alamat:</label>
        <textarea id="notes" name="notes" class="form-control">Tulis alamat sesuai dengan KTP</textarea>

        <!-- Multiple Checkboxes (inline) -->
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Ya, Saya menyetujui syarat dan ketentuan.</label>
        </div>

        <!-- Button -->
        <p>
          <button id="submit_button" name="submit_button" class="btn btn-primary">Submit</button>
        </p>

        </fieldset>
        </form>
    </div> <!-- end wrapper -->
</body>

Dalam form diatas kita akan menambahkan fungsi click pada id btnAdd untuk menduplikasi form, dan btnDel untuk menghapus form, dimana class clonedInput sebagai parameternya.

Jangan lupa untuk meng include file-file jquery yang dibutuhkan pada elemen head:

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/clone-form-td.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

Tambahkan juga kode css berikut di dalam elemen head:

<style>

      #wrapper { 
        width:595px;
        margin:0 auto;
      }
      legend {
        margin-top: 20px;
      }
      #attribution {
        font-size:12px;
        color:#999;
        padding:20px;
        margin:20px 0;
        border-top:1px solid #ccc;
      }
      #O_o { 
        text-align: center; 
        background: #33577b;
        color: #b4c9dd;
        border-bottom: 1px solid #294663;
      }
      #O_o a:link, #O_o a:visited {
        color: #b4c9dd;
        border-bottom: #b4c9dd;
        display: block;
        padding: 8px;
        text-decoration: none;
      }
      #O_o a:hover, #O_o a:active {
        color: #fff;
        border-bottom: #fff;
        text-decoration: none;
      }
      @media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {
        #wrapper {
          width: 90%;
        }
        legend {
          font-size: 24px;
          font-weight: 500;
        }
      }
      </style>

File index.php secara keseluruhan akan nampak seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dynamic Form</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style>

      #wrapper { 
        width:595px;
        margin:0 auto;
      }
      legend {
        margin-top: 20px;
      }
      #attribution {
        font-size:12px;
        color:#999;
        padding:20px;
        margin:20px 0;
        border-top:1px solid #ccc;
      }
      #O_o { 
        text-align: center; 
        background: #33577b;
        color: #b4c9dd;
        border-bottom: 1px solid #294663;
      }
      #O_o a:link, #O_o a:visited {
        color: #b4c9dd;
        border-bottom: #b4c9dd;
        display: block;
        padding: 8px;
        text-decoration: none;
      }
      #O_o a:hover, #O_o a:active {
        color: #fff;
        border-bottom: #fff;
        text-decoration: none;
      }
      @media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {
        #wrapper {
          width: 90%;
        }
        legend {
          font-size: 24px;
          font-weight: 500;
        }
      }
      </style>
    <script src="js/jquery-1.11.2.min.js"></script>

    <script type="text/javascript" src="js/clone-form-td.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- only added as a smoke test for js conflicts -->
</head>

<body>
    <div id="wrapper">
      <form action="#" method="post" id="sign-up_area" role="form">
        <div id="entry1" class="clonedInput">
          <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
          <fieldset>

        <!-- Text input-->
        <div class="form-group">
          <label class="label_fn control-label" for="first_name">Nama Depan:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
          <p class="help-block">This field is required.</p>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="label_ln control-label" for="last_name">Nama Belakang:</label>
          <input id="last_name" name="last_name" type="text" placeholder="" class="input_ln form-control">
        </div>
         <!-- Select Basic -->
        <label class="label_ttl control-label" for="title">Jenis Kelamin:</label>
        <div class="form-group">
            <select class="select_ttl form-control" name="title" id="title">
              <option value="" selected="selected" disabled="disabled">Pilih jenis kelamin</option>
              <option value="LK">Laki-laki</option>
              <option value="PR">Perempuan</option>
              
            </select> <!-- end .select_ttl -->
          </div>
          <!-- Multiple Checkboxes (inline) -->
        <label class="label_checkboxitem control-label" for="checkboxitem">Status</label>
        <div class="input-group form-group">
          <label class="checkbox-inline" for="checkboxitem-0">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-0" value="1">
            Single
          </label>
          <label class="checkbox-inline" for="checkboxitem-1">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-1" value="2">
            Menikah
          </label>
          <label class="checkbox-inline" for="checkboxitem-2">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-2" value="3">
            Janda
          </label>
          <label class="checkbox-inline" for="checkboxitem-3">
            <input class="input_checkboxitem" type="checkbox" name="checkboxitem" id="checkboxitem-3" value="4">
            Duda
          </label>
        </div>
        <!-- Prepended text-->
        <label class="label_twt control-label" for="twitter_handle">Twitter:</label>
        <div class="input-group form-group">
          <span class="input-group-addon">@</span>
          <input id="twitter_handle" name="twitter_handle" class="input_twt form-control" placeholder="" type="text">
        </div>
        <!-- Text input-->
        <div class="form-group">
          <label class="label_email control-label" for="email_address">Email:</label>
          <input id="email_address" name="email_address" type="text" placeholder="contoh: dimas@mail.com" class="input_email form-control">
        </div>
        </div><!-- end #entry1 -->
        <!-- Button (Double) -->
        <p>
        <button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">Tambah form</button>
          <button type="button" id="btnDel" name="btnDel" class="btn btn-danger">Hapus form diatas</button>
        </p>

        <!-- Textarea -->
        <label class="control-label" for="notes">Alamat:</label>
        <textarea id="notes" name="notes" class="form-control">Tulis alamat sesuai dengan KTP</textarea>

        <!-- Multiple Checkboxes (inline) -->
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Ya, Saya menyetujui syarat dan ketentuan.</label>
        </div>

        <!-- Button -->
        <p>
          <button id="submit_button" name="submit_button" class="btn btn-primary">Submit</button>
        </p>

        </fieldset>
        </form>
    </div> <!-- end wrapper -->
</body>
</html>

Selanjutnya kita buat fungsi jquery clone nya, ada dua fungsi yang kita butuhkan, yaitu fungsi untuk menduplikasi dan fungsi untuk menghapus.

Fungsi untuk menduplikasi form:

$(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // Cek berapa banyak form yang telah kita duplikasi
            newNum  = new Number(num + 1),      // Tambahkan nilai 1 untuk setiap ID duplikasi
            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // Buat elemen baru dengan fungsi clone(), dan manipulasi ID dengan nilai newNum
        // H2 - section
        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);

        // Nama depan - text
        newElem.find('.label_fn').attr('for', 'ID' + newNum + '_first_name');
        newElem.find('.input_fn').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');

        // Nama belakang - text
        newElem.find('.label_ln').attr('for', 'ID' + newNum + '_last_name');
        newElem.find('.input_ln').attr('id', 'ID' + newNum + '_last_name').attr('name', 'ID' + newNum + '_last_name').val('');

        // Status- checkbox
        newElem.find('.label_checkboxitem').attr('for', 'ID' + newNum + '_checkboxitem');
        newElem.find('.input_checkboxitem').attr('id', 'ID' + newNum + '_checkboxitem').attr('name', 'ID' + newNum + '_checkboxitem').val([]);

        // Email - text
        newElem.find('.label_email').attr('for', 'ID' + newNum + '_email_address');
        newElem.find('.input_email').attr('id', 'ID' + newNum + '_email_address').attr('name', 'ID' + newNum + '_email_address').val('');

        // Twitter handle - append and text
        newElem.find('.label_twt').attr('for', 'ID' + newNum + '_twitter_handle');
        newElem.find('.input_twt').attr('id', 'ID' + newNum + '_twitter_handle').attr('name', 'ID' + newNum + '_twitter_handle').val('');

    // Insert elemen baru setelah field input duplikasi yang terakhir 
        $('#entry' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable tombol remove
        $('#btnDel').attr('disabled', false);

    // Sesuaikan nilai '5' sesuai kebutuhan untuk mengatur jumlah duplikasi maksimal yang diperbolehkan.
        if (newNum == 5)
        $('#btnAdd').attr('disabled', true).prop('value', "Batas maksimal duplikasi");
});

Fungsi untuk mengapus section form:

 $('#btnDel').click(function () {
    // Dialog konfirmasi penghapusan
        if (confirm("Apakah anda yakin ingin menghapus form diatas? Form tidak dapat dikembalikan."))
            {
                var num = $('.clonedInput').length;
                // Berapa banyak form duplikasi yang telah dibuat
                $('#entry' + num).slideUp('slow', function () {$(this).remove();
                // Jika hanya satu form, disable tombol remove 
                    if (num -1 === 1)
                $('#btnDel').attr('disabled', true);
                // enable tombol "add"
                $('#btnAdd').attr('disabled', false).prop('value', "add section");});
            }
        return false; // Hapus form duplikasi terakhir
    });
    // Enable tombol "add"
    $('#btnAdd').attr('disabled', false);
    // Disable tombol "remove"
    $('#btnDel').attr('disabled', true);

Simpan kode jquery diatas dengan nama jquery-clone-td.js

Sekarang kita sudah dapat menduplikasi sebuah form dengan jquery, selamat mencoba.

form clone

 


About Author

Dimas Agung Noviyanto


Comment & Discussions

  • Lutfi Febriandita
    90% copas Github gan... https://github.com/mitchellg/csc212-proj2-goodteam/blob/master/GroupMaker/cloneForm/dynamic-form-bootstrap-3-0.html

  • Gan maaf saya mau bertanya itu source code nya buat php atau framework CI

  • Please LOGIN before if you want to give the comment.