Tentu kita tidak asing dengan Form macam ini:

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:

   

      
Item
Nominal
      

   
   

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

   

      
Item
Nominal
      

   

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:

   

      
Item
Nominal
      

   

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.
Artikel terkait
[Contoh] PHP, MySQL, JQuery Form Posting, Tanpa Autorefresh Halaman / Pindah Halaman
Menghilangkan Pesan Error “Notice: Undefined Variable”
[Tips] Membuat Link Perpindahan Menjadi Smooth
Mengganti Path model GET dengan PATH_INFO
[Contoh] Cara Mengexport Data SQL ke File Excel 2007 ( xlsx ) dari MySQL dengan PHP
[Contoh] Cara Membuat Watermark Tulisan Pada Gambar dengan PHP
[Contoh] Cara Menumpuk Join Dua Gambar dengan PHP ( watermark )
[Contoh] Cara Menentukan Font pada Watermark Gambar dengan PHP