Ajax : Dynamic Text Box « ….the Gands owns you…

Ajax : Dynamic Text Box

July 25, 2008 by thegands

This image get from http://josegjimenez.files.wordpress.com/2008/04/ajax-logo.jpg?w=474&h=236

Kali ini kita akan belajar lagi tentang Ajax. Saya harap belum bosan membaca postingan saya di blog saya yang masih bayi ini.

Kali ini kita akan belajar membuat text-box yang dinamis. Dinamis disini maksudnya adalah kita bisa memperbanyak dan mengurangi text-box sesuka kita. Sebagai ilustrasi, coba kita lihat gambar dibawah.

Lihat gambar diatas. Pada gambar tersebut terdapat sebuah text-box dan sebuah tombol + yang berguna untuk menambahkan text box baru.

Pada gambar diatas terdapat 2 buah text box baru dengan tombol “-” disamping masing-masing text box tersebut. Jika tombol “-” yang berada pada text box dengan value “b” (tanpa tanda petik), text box tersebut terhapus. Dan yang tersisa hanya dua buah text box dengan value “a” dan “c” (tanpa tanda petik).

Persiapan:

Text editor seperti Notepad , Notepad++, Ultraedit, Vi, Vim boleh juga editor lainnya.
Web browser.

Langkah-langkah:

Buat sebuah file html baru. Nama file tersebut boleh apa aja.
Ketikkan list code berikut ini.

<html>
<head>
<title> Dynamic Text Box </title>

<body>
<form method=post name=”dynTxtBox”>
<table border=0 cellspacing=0 cellpadding=0>
<tr id=”text_box_row_1″>
<td><input type=”text” name=”txtbox_1″></td>
<td width=”20″ align=center>:</td>
<td><INPUT TYPE=”button” value=”+” onclick=”addTxtBox()”></td>
</tr>
</table>
</form>
</body>
</html>

Inti agar text-box dapat ditambah dan dihapus sesuka hati ada lah pada list code:

<tr id=”text_box_row_1″>

Dengan memberikan id pada baris table tersebut, kita bisa menambahkan sebuah row table baru dan menghapus sebuah row table.

Lihat pada list code:

<INPUT TYPE=”button” value=”+” onclick=”addTxtBox()”>

Dengan list kode ini, sebuah row table baru akan bertambah ketika tombol “+” ditekan.

Tambahkan list code berikut diantara tag <head>…</head>

<script type=”text/javascript”>
<!–

function addTxtBox()
{
var lastField = 0;
for (var i = 0; i < document.dynTxtBox.elements.length; i++)
{
if (document.dynTxtBox.elements[i].type == ‘text’ && document.dynTxtBox.elements[i].name.substr(0, 7) == ‘txtbox_’)
{
lastField = document.dynTxtBox.elements[i].name.substr(7, document.dynTxtBox.elements[i].name.length);
}
}

var lastRow = document.getElementById(’text_box_row_’ + lastField );
if (lastRow)
{
var newRow = document.createElement(’TR’);
newRow.id = ‘text_box_row_’ + (parseInt(lastField) + 1);
var td = document.createElement(’TD’);
td.align = ‘left’;
newRow.appendChild(td);

var txtbox = document.createElement(’INPUT’);
txtbox.type = ‘text’;
td.appendChild(txtbox);
txtbox.name = ‘txtbox_’ + (parseInt(lastField) + 1);
td = document.createElement(’TD’);
td.appendChild(document.createTextNode(’:'));
td.align = ‘center’;

newRow.appendChild(td);

var btn = document.createElement(’INPUT’);
btn.type = ‘button’;
btn.value = “-”;
btn.onclick = function() { delTxtBox(parseInt(lastField) + 1); };

td = document.createElement(’TD’);
td.align = ‘left’;
td.appendChild(btn);
newRow.appendChild(td);
lastRow.parentNode.insertBefore(newRow, lastRow.nextSibling);
}
}

</script>

Mari kita belajar kodingnya yuk…

for (var i = 0; i < document.dynTxtBox.elements.length; i++)
{
if (document.dynTxtBox.elements[i].type == ‘text’ && document.dynTxtBox.elements[i].name.substr(0, 7) == ‘txtbox_’)
{
lastField = document.dynTxtBox.elements[i].name.substr(7, document.dynTxtBox.elements[i].name.length);
}
}

List code diatas kita gunakan untuk mengetahui id text box terakhir yang terdapat pada aplikasi ini. Nilai awal dari variabel lastField = 1 karena list kode dibawah ini.

<input type=”text” name=”txtbox_1″>

Fuffff….*menyapu keringat* Kita lanjut lagi yukk…

var lastRow = document.getElementById(’text_box_row_’ + lastField );
if (lastRow)
{
var newRow = document.createElement(’TR’);
newRow.id = ‘text_box_row_’ + (parseInt(lastField) + 1);
var td = document.createElement(’TD’);
td.align = ‘left’;
newRow.appendChild(td);

var txtbox = document.createElement(’INPUT’);
txtbox.type = ‘text’;
td.appendChild(txtbox);
txtbox.name = ‘txtbox_’ + (parseInt(lastField) + 1);
td = document.createElement(’TD’);
td.appendChild(document.createTextNode(’:'));
td.align = ‘center’;

newRow.appendChild(td);

var btn = document.createElement(’INPUT’);
btn.type = ‘button’;
btn.value = “-”;
btn.onclick = function() { delTxtBox(parseInt(lastField) + 1); };

td = document.createElement(’TD’);
td.align = ‘left’;
td.appendChild(btn);
newRow.appendChild(td);
lastRow.parentNode.insertBefore(newRow, lastRow.nextSibling);
}

List code diatas kita gunakan untuk menambahkan sebuah row pada table yang sudah kita define sebelumnya.

var btn = document.createElement(’INPUT’);
btn.type = ‘button’;
btn.value = “-”;
btn.onclick = function() { delTxtBox(parseInt(lastField) + 1); };

Pada list kode diatas, kita membuat sebuah tombol baru yaitu tombol “-”, dimana tombol ini bertugas memicu fungsi delTextbox() yang berguna untuk menghapus text box disebelahnya.

Coba jalankan kode-nya. Sudah jalankan? Tapi kode kita diatas belum bisa menghapus text-box, jadi kita masih menambahkan serangkaian list code lagi untuk menghapus text box.
Tambahkan listing code dibawah ini dibawah fungsi addTxtBox()

function delTxtBox(fieldNumber)
{
var lastRow = document.getElementById(’text_box_row_’ + fieldNumber);
if (lastRow)
{
lastRow.removeNode(true);
}
}

Coba buka dengan browser dan jalankan.
Gimana? Udah jalan, kan? Kalau belum jalan, kamu boleh menanyakannya kepada saya di sini. Ocey?
Sekarang kamu boleh mengembangkan program kecil ini sesuai dengan kebutuhan mu.

Kegunaan program ini akan kita bahas pada tutorial berikutnya, jadi tunggu aja ya??

Oh ya, progam kecil yang sudah jadi boleh kamu download di http://www.ziddu.com/download/1750591/DynamicTextBox.zip.html

Happy coding..

Posted in AJAX, programming | Tagged AJAX, dynamic, dynamic textbox, edit plus, html, javascript, programming, textbox, web programming | 24 Comments

24 Responses

on July 25, 2008 at 7:33 am | Reply elyswelt

bagus nih buat blogger yg masih gaptek spt aku

thanks kunjungannya ya.
on July 25, 2008 at 7:58 am | Reply fanari

wah keren2, mas emang masternya ajax nih
on July 25, 2008 at 8:34 am | Reply rudyahud

masya Allah….apaan tuh bos????tobat….kagak mudeng sumpah….
on July 25, 2008 at 9:00 am | Reply windra

AJAX…………gimana kalo pake RUBY ??? dah pernah ??
on July 25, 2008 at 9:04 am | Reply okta sihotang

masih error tuh gan..
trus..cem2nya kw kasih dulu tambahan code bgimana cara mengambil value dari tiap2 texboxt yang di create..
on July 25, 2008 at 9:15 am | Reply thegands

@elyswelt:
mas ini bisa aja…
terima kasih kembali atas kunjungannya mas..

@fanari:
aah.. saya masih nubi kok..

@rudyahud:
pelan2 aja bos.. saya yakin pasti bisa..

@windra:
Ruby? Klo Ruby aku cuma sempat megang dikit. Hmm, teknologi baru JRuby dah nyoba gak?

@okta sihotang:
hah.. masih error?? Error dimana yuk… Di kompie ku adem-ayem aja tuh…
mengambil value dari tiap2 text box yang dicreate akan diulas besok. so sabar aja yah… Aku lagi sibuk banget neh…
on July 25, 2008 at 9:33 am | Reply ruben

wow… hardcode banget..

yg enakan tuh pake ASP.NET AJAX..
ga harus ngecode kayak gitu.. hehe..

satu kata untuk mu:

Mantapppp….!!! :p
on July 25, 2008 at 9:37 am | Reply Elys Welt

OOT : hihihi… jgn dipanggil mas donk, aku perempuan tulen lho
on July 25, 2008 at 9:45 am | Reply thegands

@ruben:
ASP.NET AJAX emang keren. Tapi rasanya kurang sreg klo gak tau “daleman”-nya. hihihihi…. *terbayang daleman yang lain*
tengkyu tulang..

@elys Welt:
mati aku!!! *menjitak kepala sendiri* Duh…. maaf ya mbak.. bener… suer… abisnya gak ada avatarnya, jadi kagak tau mbak.. maaf ya mbak *muka menunduk*
on July 25, 2008 at 10:59 am | Reply achoey sang khilaf

aduh
saya mah gaptek
jadi malah binyung bacanya
on July 25, 2008 at 12:51 pm | Reply kyra.curapix

ini perkembangan dari bahasa java ta mas?
on July 25, 2008 at 7:12 pm | Reply Gelandangan

wahhh baru tau klo ada ajax
on July 26, 2008 at 1:27 am | Reply thegands

@achoey sang khilaf:
gapapa mas… dicoba aja.. ntar pasti bisa kok…

@kyra.curapix:
Ini bukan berasal dari bahasa java. melainkan dari bahasa LiveScript yang di buat oleh Netscape.

@Gelandangan:
cobain aja bro… pasti enak mengkoding dengan ajax…
on July 26, 2008 at 2:09 am | Reply Putra eka

Bro.. boleh kursus ga sama dirimu…
on July 26, 2008 at 2:42 am | Reply thegands

@Putra eka:
waduh… jangan bilang kursus bro.. saya masih cupu dan nubi banget.. alangkah baiknya kita belajar bareng aja. Gimana?
on July 26, 2008 at 3:08 am | Reply Ezron Sinaga

Mantab.. mantab…
on July 26, 2008 at 5:44 am | Reply sayapuspa

wah ajax??saya gak familiar dengan hal itu, tapi boleh juga tuh untuk bahan plajaran baru..
on July 26, 2008 at 5:48 am | Reply FaNZ

g ngerti..
on July 26, 2008 at 5:58 am | Reply duan

Bgs nich belajar di sini…!! mantep mas
on July 26, 2008 at 6:03 am | Reply Ajax : Dynamic Text Box #2 « ….the Gands owns you…

[...] kita udah ngebahas tentang dynamic text box. Nah, namun program yang kita bahas kemaren itu belum selesai. Karena belum ada sisi penggunaan [...]
on July 26, 2008 at 6:10 am | Reply thegands

@ezron:
makasih bang…

@sayapuspa:
saya juga baru dengan ajax kok mbak. sueerr…. klo ada yang mau mbak tanyakan, silahkan aja mbak. saya akan berusaha menjawab pertanyaan mbak.

@fanz:
g ngerti dimananya mas?

@duan:
thanx you bro….
on July 29, 2008 at 1:20 am | Reply David Simamora

jago kali kau lae. kalo aq ga perna ngoding AJAX. yang perna, nyuru orang ngoding AJAX. Semangat lae.
on July 29, 2008 at 1:34 am | Reply thegands

@david:
i’m just a child lae…
on November 28, 2008 at 6:17 am | Reply green

sakalangkong bang