[Tips] Menambah “Add More” Input Form

Tentu kita tidak asing dengan Form macam ini:
addmore
Itu adalah form pengiriman email pada GMail. Pada form tersebut, memungkinkan kita menambahkan input type file untuk penambahan attachment file, dan input type text pada kolom CC dan BCC. Semua itu hanya kita lakukan dalam satu kali klik tanpa mereload halaman. Bagaimana cara membuatnya?

Proses pembuatannnya sangatlah mudah. Dengan bantuan sebuah JQuery Library, kita dapat membuat satu script JQuery untuk melakukannya. Andaikan kita memiliki sebuah script PHP / HTML berikut:

ItemNominal

Sedangkan kita ingin, kolom input type tersebut dapat ditambah setiap saat hingga berapapun tanpa mereload halaman. Apa yang perlu kita tambah?

Langkah pertama kita tambahkan saja sebuah library JQuery, dan sebuah script, serta pemicunya

ItemNominal
Tambah form

Tentunya juga pada struktur direktori kita letakkan sebuah file jquery seperti yang disebut pada halaman tersebut.
Selanjutnya di bawah baris yang memuat JQuery tersebut, kita letakkan sebuah script, bisa dituliskan langsung atau bisa kita simpan dalam sebuah script terpisah. Pada kasus contoh ini saya buat sebuah script dalam bentuk file berbeda. Isi script tersebut adalah sebuah fungsi javascript bernama tambah(), yang akan dipicu prosesnya oleh baris HTML

Tambah form

Script tersebut berisi:

function tambah(){
$(".table-common").append(' ').children(':last');
}

Ketika text TAMBAH FORM diklik, maka fungsi tambah akan berproses. Proses tersebut akan berlaku dengan menambahkan (append) dalam table class “tambah-common”, berisi susunan tabel yang persis dengan baris HTML dalam tabel. Proses penambahan akan dilakukan pada bagian akhir dari tabel dengan diarahkan oleh fungsi children(‘:last’).

Sampai disini proses HTML telah selesai. Lantas bagaimana dengan input name? Apakah NAME nya akan sama semua? Sementara script target PHP akan butuh masukan yang berbeda?
Ya, selanjutnya kita akan buat bahwa semua input type tersebut SAMA NAMAnya namun kita jadikan array dengan cara menambahkan tanda [] pada semua name. Script HTML menjadi seperti ini:

ItemNominal
Tambah form

Begitu juga script.js menjadi

function tambah(){
$(".table-common").append(' ').children(':last');
}

Lantas script target seperti apa?
Target.php kira-kira akan seperti ini:

"; 
   $i++;
   }
}
?>

Karena masukan item[] adalah array, maka pada target, $_POST[‘item’] adalah array juga. Tentu memiliki elemen array $_POST[‘item’][0] . . . . $_POST[‘n’]. Nah tinggal memprosesnya kan? Entah dalam database atau yang lain. ๐Ÿ™‚

Semoga berguna.

13 thoughts on “[Tips] Menambah “Add More” Input Form

  1. Selamat Malam Pak
    Bagus tutorialnya, namun bagaimana insert ke databasenya dan jika ditampilkan dan edit?
    Maaf newie pak

Leave a Reply

Your email address will not be published. Required fields are marked *