Assalamualaikum wr.wb.
Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element wajib ada pada setiap website. Form umumnya digunakan agar website dapat berinteraksi dengan user/pengunjung, misalnya untuk login, pencarian dan lain sebagainya. Saya yakin kita semua sebagai web developer pasti cukup sering membuat form, akan tetapi form yang kita buat kadang statis, nah Pada kesempatan kali ini saya akan menulis tutorial tentang pembuatan form dinamis, apa itu dinamis? Dinamis ya brarti tidak statis hehe, maksudnya gini, form dinamis adalah form yang bisa berubah-ubah jumlahnya, Ok langsung saja ke tutorial, buat formnya terlebih dahulu.
<html>
<head>
<title> Form Dinamis </title>
</head>
<body>
<a href='#' onclick="tambah_form(); return false;" >Add</a>
<a href='#' onclick="kurangi_form(); return false;">Remove</a>
<form method="post" action="">
// kita masukkan dalam tag table agar tampilannya rapi
<table id="formku">
<tr><td><input type="text" name="inputan[]"></td></tr>
</table>
<input type="submit" name="ok" value="Submit">
</form>
</body>
</html>
Berikut hasilnya.
Bisa dilihat pada form diatas terdapat link “Add” dan “Remove”, tetapi link diatas tidak digunakan untuk berpindah ke halaman lain, melainkan hanya digunakan untuk menjalankan function javascript.
<!-- apabila link "Add" diklik maka akan menjalankan function tambah_form --> <a href='#' onclick="tambah_form(); return false;" >Add</a> <!-- apabila link "Remove" diklik maka akan menjalankan function kurangi_form --> <a href='#' onclick="kurangi_form(); return false;">Remove</a>
jadi apabila kita mengklik link “Add” maka form inputan akan bertambah dan apabila mengklik link “remove” maka form inputan akan berkurang. disini kita menggunakan JavaScript untuk memanipulasi form, berikut codenya
<script>
function tambah_form(){
//mencari element dengan id "formku" (yaitu table)
var target=document.getElementById("formku");
// membuat element <tr>
var tabel_row=document.createElement("tr");
// membuat element <td>
var tabel_col=document.createElement("td");
// membuat element input untuk menambah form inputan
var tambah=document.createElement("input");
// menambahkan element <tr> pada tag table
target.appendChild(tabel_row);
// menambahkan element <td> pada tag <tr>
tabel_row.appendChild(tabel_col);
// menambahkan element input pada tag <td>
tabel_col.appendChild(tambah);
// kemudian memberikan attribute type="text" untuk form inputan
tambah.setAttribute('type','text');
// lalu memberikan attribute name="inputan[]" untuk form inputan
tambah.setAttribute('name','inputan[]');
}
</script>
yups sudah selesai untuk function tambah_form()-nya, mari kita coba.
selanjutnya membuat function kurangi_form(), berikut codenya.
<script>
function kurangi_form(){
// mencari element dengan id="formku" yaitu table
var target=document.getElementById("formku");
// mendapatkan element terakhir dari <table> yaitu <tr> terakhir
var akhir=target.lastChild;
// menghapus <tr> terakhir beserta element2 didalamnya
target.removeChild(akhir);
}
</script>
kemudian kita coba .
yups... berhasil.
berikut full codenya.
<html>
<head>
<title> Form Dinamis </title>
</head>
<body>
<a href='#' onclick="tambah_form(); return false;" >Add</a>
<a href='#' onclick="kurangi_form(); return false;">Remove</a>
<form method="post" action="">
<table id="formku">
<tr><td><input type="text" name="inputan[]"></td></tr>
</table>
<input type="submit" name="ok" value="Submit">
</form>
<script>
function tambah_form(){
var target=document.getElementById("formku");
var tabel_row=document.createElement("tr");
var tabel_col=document.createElement("td");
var tambah=document.createElement("input");
target.appendChild(tabel_row);
tabel_row.appendChild(tabel_col);
tabel_col.appendChild(tambah);
tambah.setAttribute('type','text');
tambah.setAttribute('name','inputan[]');
}
function kurangi_form(){
var target=document.getElementById("formku");
var akhir=target.lastChild;
target.removeChild(akhir);
}
</script>
</body>
</html>
ok sekian tutorial kali ini, semoga bermanfaat, sampai jumpa dan terima kasih.
Wassalamualaikum wr. wb.
