Cara Menambahkan Textfield dengan Javascript Secara Dinamis

By . Kategori: Web Tags: , , ,

irnanto.com – Kali ini kita akan membuat penambahan textfield pada web secara dinamis. Penambahan textfield ini berfungsi untuk menambahkan inputan yang menggunakan textfield dengan nama yang sama. Lebih mudahnya saya akan memberikan sebuah contoh : jika kita memiliki form, misalnya kita akan menginputkan Hobby dari setiap user, sedangkan setiap user memiliki hobby yang berbeda dan jumlah hobby dari setiap user juga berbeda.

Bagaimana cara kita memanipulasi form atau lebih tepatnya textfield agar jumlah inputan textfield hobby tersebut dapat sesuai dengan jumlah hobby dari setiap user yang berbeda ?. Kita bisa membuat menggunakan php atau pemrograman yang lain, tapi lebih mudahnya kita akan menggunakan javascript untuk membuat textfield dinamis agar bertambah jumlahnya dan sesuai dengan keinginan user.

Kita harus membuat sebuah pemicu (link / tombol) agar user bisa menambahkan jumlah textfield sesuai dengan keinginannya. Pemicu berfungsi untuk menggenerate script atau konten agar bisa menampilkan script / konten yang diinginkan (dalam hal ini adalah textfield). Kita langsung lihat script menambahkan textfield secara dinamis di bawah ini.

<html>
  <head>
    <title>Textfield Dinamis – irnanto.com</title>
    <script language=”JavaScript” type=”text/JavaScript”>
        counter=0;
        function action(){
            counterNext=counter+1;
            document.getElementById(“input”+counter).innerHTML = “<p>Masukkan Data <input name=’data[]’ type=’text’ /></p> <div id=\”input”+counterNext+”\”></div>”;// perhatikan tanda petiknya, sama seperti pemrograman java yang lainnya
            counter++;
        }
    </script>
  </head>
  <body>
    <h1>Form Dinamis</h1>
    <form action=”proses_dinamis.php” method=”post”>
        <p>Masukkan Data <input name=”data[]” type=”text” /></p>
        <div id=”input0″></div>
        <p><a href=”javascript:action();”>Tambah</a></p>
    </form>
  </body>
</html>

Penjelasan singkat dari source code penambahan textfield pada form dinamis di atas adalah sebagi berikut :

  • Kita membuat variabel counter yang digunakan untuk menentukan jumlah textfield yang akan muncul
  • Membuat sebuah fungsi action yang akan di panggil ketika user mengklik link “Tambah”
  • Ketika user mengklik “Tambah” maka script function akan dijalankan. Script pertama yang dijalankan adalah menampung penambahan nilai variabel counter dengan angka satu lalu di simpan ke variabel counterNext
  • Mencari dokumen yang elemen ID sama dengan “input”+counter (counter berupa nilai angka) dan memasukkan conten html berupa “<p>Masukkan Data <input name=’data[]’ type=’text’ /></p> <div id=\”input”+counterNext+”\”></div>” . Jika di lihat di HTML akan terlihat seperti gambar source code / Script textfield dinamis setelah penambahan element.
  • Menambah counter dengan 1
  • Script HTML-nya sudah mengerti semua kan ?
  • Script <a href=”javascript:action();”>Tambah</a> akan memanggil fungsi action() pada javascript.
  • Hail penambahan elemen pertama akan diletakkan di tag <div id=”input0″></div>. Silahkan coba dan lihat perubahan script yang terjadi.

Jika dijalankan di browser pertama kalai, maka tampilannya akan seperti gambar di bawah ini.

form dinamis awal load di browser irnanto.com

Form dinamis awal load di browser

Coba kita perhatikan script dari hasil tampilan gambar di atas yang sama dengan script yang kita buat.

script form dinamis pertama di load browser irnanto.com

Tampilan script form dinamis pertama di load browser

Coba kita klik tulisan “Tambah”, maka akan muncul satu textfield lagi di bawah textfield pertama, dan coba kita klik lagi tombol “Tambah”, maka akan muncul satu textfield lagi di bawah textfield ke dua, begitu seterusnya. Hasil penambahan textfield dapat dilihat di gambar di bawah ini.

Textfield Dinamis Akan Bertambah Setelah User meng-klik Tambah

Textfield dinamis akan bertambah setelah user meng-klik tambah

Kita bisa melihat hasil perubahan pada scriptnya juga seperti gambar di bawah ini.

Script Textfield Dinamis Setelah Penambahan Element

Script textfield dinamis setelah penambahan element

Bisa dilihat kan penambahan elemen di atas ?. Cukup mudah dalam implementasinya. Ayo coba Cara Menambahkan Textfield dengan Javascript Secara Dinamis dan silahkan modifikasi sesuai dengan kebutuhan Anda.

Belum ada komentar untuk “Cara Menambahkan Textfield dengan Javascript Secara Dinamis”

Tinggalkan Komentar