Beberapa tahun yang lalu, saya pernah menjelaskan cara mengirim atau
mensubmit data secara simultan melalui sebuah form dinamis. Anda bisa
membaca kembali artikel tersebut.
Meskipun cara yang dijelaskan pada artikel tersebut berhasil, namun
secara teknis cara tersebut agak sedikit merepotkan. Mengapa merepotkan?
ya.. karena kita diminta menentukan dahulu jumlah data yang akan
disubmit. Penentuan jumlah data ini dilakukan supaya memunculkan
komponen input sejumlah data tersebut dalam formnya. So.. gimana kalau
jumlah datanya banyak, dan kita tidak sempat menghitungnya? Nah.. repot
bukan?
Dalam artikel ini, saya akan mencoba memaparkan teknik lain dalam
membuat form dinamis yang mirip seperti di atas namun tanpa menentukan
jumlah datanya dahulu, melainkan dengan mengklik suatu tombol atau link
maka secara otomatis komponen input akan bertambah sendiri. Setiap kali
kita mau menambah data baru, tinggal klik link tersebut tanpa merefresh
halaman sehingga data yang telah diinputkan sebelumnya tidak hilang.
Perhatikan ilustrasi dari teknik tersebut di bawah ini
Gambar di atas adalah tampilan mula-mula form yang terdiri dari
sebuah komponen input. Kita bisa mengisi data pertama pada komponen
input tersebut. Apabila kita ingin menambah data baru, maka tinggal
diklik saja link ‘Tambah’ nya dan jreng… munculah komponen input
berikutnya di bawah nya, tanpa merefresh halaman dan data pertamanya
tidak hilang. Perhatikan gambar di bawah ini
Apabila mau menambah data berikutnya lagi, klik ‘Tambah’ lagi dan munculah komponen input ketiga.
Begitu seterusnya…
OK.. dah paham skenarionya ya? sekarang bagaimana cara membuatnya?
Untuk membuat form dinamis seperti di atas, kita akan menggunakan
Javascript. Adapun konsepnya adalah, kita akan gunakan innerHTML untuk
menyisipkan tag HTML ke dalam sebuah bagian tag HTML yang lain.
Perhatikan konsep di bawah ini.
Andaikan mula-mula kita punya tag HTML untuk form seperti di bawah ini
1.<form method="post" action="...">2.Masukkan Data <input type="text" name="data[]">3. 4.<div id="input0">5.div>6. 7.form>
Perhatikan bagian
1.<div id="input0">
2.div>
bagian tersebut, adalah bagian tag HTML yang nantinya akan kita
tempatkan komponen input berikutnya. Sehingga apabila kita sisipkan lagi
komponen input di dalam bagian ber-id ‘input0′, struktur tag HTML nya
menjadi
01.<form method="post" action="...">
02.Masukkan Data <input type="text" name="data[]">
03.
04.<div id="input0">
05.Masukkan Data <input type="text" name="data[]">
06.
07.<div id="input1">
08.div>09.div>10. 11.form>
Apabila disipkan lagi komponen berikutnya di id ‘input1′, maka strukturnya menjadi
01.<form method="post" action="...">
02.Masukkan Data <input type="text" name="data[]">
03.
04.<div id="input0">
05.Masukkan Data <input type="text" name="data[]">
06.
07.<div id="input1">
08.Masukkan Data <input type="text" name="data[]">
09.
10.<div id="input2">
11.div>12.div>13.div>14. 15.form>
Begitu seterusnya… itulah konsep dalam membuat form dinamis seperti
di atas. Setiap kali kita sisipkan komponen input baru, kita sisipkan
pula bagian atau tempat untuk meletakkan komponen input berikutnya
dengan id yang berbeda.
Di sini, id komponen dibuat berbeda supaya kita bisa menentukan
lokasi atau bagian yang tepat dimana ingin disisipkan tag HTML yang
baru.
Trus.. bagaimana perintah Javascript untuk menyisipkan tag HTML ke
dalam sebuah bagian ber-id tertentu? Seperti yang telah saya singgung
sebelumnya, yaitu menggunakan innerHTML. Adapun sintaksnya sbb:
1.document.getElementById("namaID").innerHTML = "...";
Sebagai contoh, misalkan kita ingin menyisipkan tag HTML
Test
ke dalam komponen ber-id ‘contoh’ maka perintahnya
1.document.getElementById("contoh").innerHTML = "Test
";
Nah.. konsepnya sudah kita dapatkan, sekarang saatnya action membuat script nya. Ini dia scriptnya
01.<html>
02.<head>
03.<script language="JavaScript" type="text/JavaScript">
04.counter = 0;
05.function action()
06.{
07.counterNext = counter + 1;
08.document.getElementById("input"+counter).innerHTML = "<p>Masukkan Data <input type='text' name='data[]'>p><div id=\"input"+counterNext+"\">div>";
09.counter++;10.}11.script>12.head>13. 14.<body>15.<h1>Form Dinamish1>16. 17.<form method="post" action="submit.php">18.<p>Masukkan Data <input type='text' name='data[]'>p>19. 20.<div id="input0">21.div>22. 23.<p><a href="javascript:action();">Tambaha>p>24.<p><input type="submit" name="submit" value="Submit"><input type="reset" name="reset" value="Reset">p>25.form>26. 27.body>28.html>
Keterangan:
Untuk membuat nama id komponen yang berubah-ubah: input0, input1,
input2, .. dst kita menggunakan increment counter++ dengan nilai awal
counternya adalah 0.
Script di atas sudah dicoba dijalankan di browser Firefox 3 dan IE 6, dan.. hasilnya sukses.
Mudah bukan membuatnya?? nah.. dalam kesempatan lain saya akan
menjelaskan cara membaca data yang diinputkan melalui form dinamis di
atas pada script PHP. Tunggu ya…
EmoticonEmoticon