karena di sekolah kebetulan lagi bikin web ,, jadi di tutor ini saya akan menjelaskan cara membuat textbox pada dreamweaver ... tapi semoga saja bisa bermanfaat juga buat yang lainnya ,,, oke mulai sajalah
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>
udah deh jadii,,,
semoga bermanfaat yaaa
