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
Perhatikan bagian
Apabila disipkan lagi komponen berikutnya di id ‘input1′, maka strukturnya menjadi
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:
Sebagai contoh, misalkan kita ingin menyisipkan tag HTML
Nah.. konsepnya sudah kita dapatkan, sekarang saatnya action membuat script nya. Ini dia scriptnya
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…
Sumber : http://blog.rosihanari.net
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
>
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
>
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
>
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 =
"..."
;
<p>Test</p>
ke dalam komponen ber-id ‘contoh’ maka perintahnya1.
document.getElementById(
"contoh"
).innerHTML =
"<p>Test</p>"
;
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 Dinamis</
h1
>
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();"
>Tambah</
a
></
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
>
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…
Sumber : http://blog.rosihanari.net
2 comments:
gan scerip untuk menyimpan ke database nya gimana
agar bisa meng input sesuai denga tex tabel yang diinginkan dan tersimpan ke daam databse semua datanya ..tolong gan script nya ..makasih bantuan nya gan
Posting Komentar