Membuat Form Dinamis dengan HTML & Javascript

Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie

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 k...

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. Add Remove

// kita masukkan dalam tag table agar tampilannya rapi

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.

Add Remove

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 var tabel_row=document.createElement("tr"); // membuat element var tabel_col=document.createElement("td"); // membuat element input untuk menambah form inputan var tambah=document.createElement("input"); // menambahkan element pada tag table target.appendChild(tabel_row); // menambahkan element pada tag tabel_row.appendChild(tabel_col); // menambahkan element input pada tag 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[]'); } 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 yaitu terakhir var akhir=target.lastChild; // menghapus terakhir beserta element2 didalamnya target.removeChild(akhir); }

kemudian kita coba .

yups... berhasil. berikut full codenya. AddRemove <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); }



ok sekian tutorial kali ini, semoga bermanfaat, sampai jumpa dan terima kasih. Wassalamualaikum wr. wb.

Tentang Penulis d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding , ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi