Membuat input text secara dinamis
Dengan Syntax:
Demo
<html>
<head>
<script type="text/javascript">
function tambahItem(idTabel)
{
var idtabel = document.getElementById(idTabel);
var isi = document.getElementById('isi').value;
var jumBaris = idtabel.rows.length;
var baris = idtabel.insertRow(jumBaris);
var kolom1 = baris.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
kolom1.appendChild(element1);
var kolom2 = baris.insertCell(1);
kolom2.innerHTML = '<input type="text" name="text1[]" value="'+isi+'" readonly=readonly style="background-color:white;border:none" />';
document.getElementById('isi').value = '';
}
function hapusItem(idTabel)
{
try{
var idtabel = document.getElementById(idTabel);
var jumBaris = idtabel.rows.length;
for(var i=0;i<jumBaris;i++)
{
var baris = idtabel.rows[i];
var chkbox = baris.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
idtabel.deleteRow(i);
jumBaris--;
i--;
}
}
}catch(e)
{
alert(e);
}
}
</script></head>
<body>
<input type="text" name="isi" id="isi" value="" />
<input type="button" value="Tambah Item" onclick="tambahItem('tabelku')" />
<input type="button" value="Hapus Item" onclick="hapusItem('tabelku')" />
<form method="post" action="hasil.php">
<table id="tabelku" border="1">
<tr>
<td>Cek</td>
<td align="center" width="150px">Input text</td>
</tr>
</table>
<input type="submit" value="Simpan" />
</form>
</body>
</html>
Sumber
solved gan
ReplyDeletemas saya mau tanya, untuk menggantikan tombol tambah dengan enter gimana ya?
jadi misalkan saya input dengan dengan scaner barcode langsung form nya tambah otomatis tanpa harus tekan enter...
gmn membuat validasinya kalau text yg kita tambah tidak boleh kosong nilainya (""), please master
ReplyDelete