Saat menginputkan data yang jumlahnya sudah ditentukan memang sangat mudah. Tapi, bagaimana jika data itu belum ditentukan jumlahnya? Dan, bagaimana jika jumlahnya puluhan? Wao, repotkan buat banyak textbox. Nah, saya menemukan cara yang sekiranya bisa membantu kita semua untuk menangani permasalahan tersebut. :)
Disini kita memanfaatkan javascript untuk membantu kita menambahkan textbox. Dengan menggunakan getElementByid dan innerHTML, kita bisa menyisipkan HTML di dalam HTML menggunakan javascipt.
Scriptnya sebagai berikut ini :
Jadi, koding lengkapnya seperti dibawah ini :
Sebagai bantuan, kita menambahkan tag div dengan id "input0". Nah, pada tag div inilah yang menjadi tempat untuk menyisipkan input textbox yang baru. Dan, kenapa input0? Coba sahabat sekalian amati di dalam tag script-nya. Pada document.getElementById("input"+counter).innerHTML = "<p>Input Data : <input type='text' name='data[]'/></p><div id="input"+counterNext+""></div>";, kita melakukan counter untuk id input. Yang akan dihasilkan pada tag div :
Sahabat bisa amati yang terjadi pada div bagian id-nya :)
Disini kita memanfaatkan javascript untuk membantu kita menambahkan textbox. Dengan menggunakan getElementByid dan innerHTML, kita bisa menyisipkan HTML di dalam HTML menggunakan javascipt.
Scriptnya sebagai berikut ini :
document.getElementById("idElement"+counter).innerHTML = "...";
Script di atas yang akan kita sisipkan pada tag head di dalam tag script.
Jadi, koding lengkapnya seperti dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/JavaScript">
counter = 0;
function action()
{
counterNext = counter + 1;
document.getElementById("input"+counter).innerHTML = "<p>Input Data : <input type='text' name='data[]'></p><div id="input"+counterNext+""></div>";
counter++;
}
</script>
<title>Membuat Textbox Dinamis dengan PHP</title>
</head>
<body>
<h1>Silahkan Masukkan Data</h1>
<form action="" method="post" enctype="multipart/form-data">
<p>Input Data : <input type="text" name="data[]"/></p>
<div id="input0">
</div>
<p><a href="javascript:action();">Tambah Input</a></p>
<p><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /></p>
</form>
</body>
</html>
*) Saya menggunakan Dreamwearver sebagai editor, jadi script-script tambahan tersebut otomatis ada dan mudah dibuat menggunakan di Dreamweaver
Sebagai bantuan, kita menambahkan tag div dengan id "input0". Nah, pada tag div inilah yang menjadi tempat untuk menyisipkan input textbox yang baru. Dan, kenapa input0? Coba sahabat sekalian amati di dalam tag script-nya. Pada document.getElementById("input"+counter).innerHTML = "<p>Input Data : <input type='text' name='data[]'/></p><div id="input"+counterNext+""></div>";, kita melakukan counter untuk id input. Yang akan dihasilkan pada tag div :
<p>Input Data : <input type="text" name="data[]"/></p>
<div id="input0">
<p>Input Data : <input type="text" name="data[]"/></p>
<div id="input1">
<p>Input Data : <input type="text" name="data[]"/></p>
<div id="input2">
<p>Input Data : <input type="text" name="data[]"/></p>
............. dan begitu seterusnya ..............
</div>
</div>
</div>
Sahabat bisa amati yang terjadi pada div bagian id-nya :)
Untuk melihat hasilnya, silakan klik disini. Terimakasih buat atas mas Rosihan Ari untuk caranya ini. :)
Buat, sahabat-sahabat sekalian, selamat mencobanya :D
mohon linknya segera dikonfirmasi
BalasHapusTerimakasih,
BalasHapusMaaf terlallu lama, saya sedang mengerjakan website.. :D
Salam kenal..
emailnya sudah saya terima :D
saya sudah memasang link mas Johan :D
Salam blogger. :D
testing, http://diaryspace.tk
BalasHapusto Unapzeus Adinovic: trims sudah berkunjung.. wah keren tu ide website diary nya.. :D, like.. :D
BalasHapustext box nya gak bisa nambah berkali2 ya? cuma sekali aja?
BalasHapusbisa kok nambah berkali-kali, mungkin cek ulang dibagian javascriptnya :)
BalasHapus