Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
February 5th, 2010 | by rosihanari |
Cetak Artikel Ini
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
<form method="post" action="..."> Masukkan Data <input type="text" name="data[]"> <div id="input0"> </div> </form>
Perhatikan bagian
<div id="input0"> </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
<form method="post" action="..."> Masukkan Data <input type="text" name="data[]"> <div id="input0"> Masukkan Data <input type="text" name="data[]"> <div id="input1"> </div> </div> </form>
Apabila disipkan lagi komponen berikutnya di id ‘input1′, maka strukturnya menjadi
<form method="post" action="...">
Masukkan Data <input type="text" name="data[]">
<div id="input0">
Masukkan Data <input type="text" name="data[]">
<div id="input1">
Masukkan Data <input type="text" name="data[]">
<div id="input2">
</div>
</div>
</div>
</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:
document.getElementById("namaID").innerHTML = "...";
Sebagai contoh, misalkan kita ingin menyisipkan tag HTML <p>Test</p> ke dalam komponen ber-id ‘contoh’ maka perintahnya
document.getElementById("contoh").innerHTML = "<p>Test</p>";
Nah.. konsepnya sudah kita dapatkan, sekarang saatnya action membuat script nya. Ini dia scriptnya
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
counter = 0;
function action()
{
counterNext = counter + 1;
document.getElementById("input"+counter).innerHTML = "<p>Masukkan Data <input type='text' name='data[]'></p><div id=\"input"+counterNext+"\"></div>";
counter++;
}
</script>
</head>
<body>
<h1>Form Dinamis</h1>
<form method="post" action="submit.php">
<p>Masukkan Data <input type='text' name='data[]'></p>
<div id="input0">
</div>
<p><a href="javascript:action();">Tambah</a></p>
<p><input type="submit" name="submit" value="Submit"><input type="reset" name="reset" value="Reset"></p>
</form>
</body>
</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…
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Alternatif Script Untuk Memproses Input Data Form Dinamis
- Input Data Ke MySQL Secara Simultan Via Form dengan PHP
- Teknik Submit Data Melalui Multi Form
- Script PHP Updating Data Secara Simultan (Studi Kasus Update Nilai Kuliah Mahasiswa)
- Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
- Script PHP untuk Mengedit Data Via Form
- Script PHP untuk Mencegah Submit Form Berulang Kali
- Script PHP untuk Edit Data dengan Komponen RadioButton pada Form
- Beberapa Tombol Submit dalam Satu Form
- Membuat Script PHP untuk Hapus Data dengan Multi Selection
Share this article on:
Kata kunci: form dinamis - membuat form - script form - tutorial html - tutorial javascript -
mantap ni bos…
makasih ya…
Wuih canggih pak Ari,
konsepnya dapet dari facebook ya???
hebat2.
di coba tuh pak buat script chat yang kaya di facebook.
jadi javascript nya nge-request ke server kl kita tekan enter.
tuh kira2 cranya gmna ya…???
Terima kasih..
Mantap…
pak,script diatas bisa apa tdk klo input type text diganti dengan option select n tiap option select berisi data dari tabel yang sama.jadi kayak pilihan 1, pilihan 2, pilihan 3,dll.mohon bantuannya donk pak…thx be4
@ita: bisa saja mbak, tag HTML apapun bisa disisipkan dengan cara di atas.
@noe: itu hasil coba2 saja mas.. ide nya dah lama, cuman caranya baru ketemu barusan. Setelah ketemu langsung saya publish di blog, supaya saya sendiri tidak lupa sekaligus bisa dibaca orang lain.
hmmmmm, kayak ajax jadi nya, kan bisa juga dengan looping dari php itu sendiri hehehehe
nanya pak guru tapi saya request aja di source nya oke….masalah absensi siswa waduh
Wow… inilah artikel yang saya cari… terima kasih pak rosi…
saya sudah berhasil mengganti dngn combo box n skrg tuk script submitnya gmn pak?thx be4..
Assalamualaikum, Mas terimakasih…terimakasihh… banyak atas bantuannya, sya tunggu balasan email dari mas!
@ita: sabar ya mbak…
mas ari,
salam kenal saya harry di jakarta, mau nanya aja.
bisa ngga ya kita buat script (misalnya utk data pemesanan sesuatu) untuk kta sebar taro di blog2 orang lain (tentunya dengan seijin empunya). tapi kalau disubmit form itu datanya terkirim ke database kita sendiri .. (mungkin ngga langsung, lewat text, email, atau apalah).
tks ya mas
@chrisman: bisa saja mas, tinggal diarahkan saja action dari form submit nya ke script untuk proses penyimpanan data di database kita.
mas nanya donk kalo untuk remove nya gimana?? counternya saya rubah jadi –tetep gak bisa malah jadi ngaco??? thx ya
Pak tanya ya,, gimana caranya menampilkan hasil checkbox yang dicentang saja otomatis text isian di sebelahnya,,
Jazakumullah,,
assalamualaikum wr.wb
terima kasih banyak pak..
mas mau tanya kok pas mau simpan ke database name data[] error.tu gmana ya mas
@muji: coba cek lagi mas, mungkin ada sintaks atau perintah yang salah
ia mas.skrg sudah bs.makasih
ManTappp…
5Kasih….Bgt,,,,
I Like It…