Membuat Form Input Dinamis Dengan Jquery

30 January 2015 | Tags: , , ,


Dalam mengisi sebuah formulir online adakalanya user perlu untuk memasukkan salah satu isian dengan nilai lebih dari satu atau  banyak sekaligus, misalnya hobi. Atau dalam contoh email baik lewat Gmail, Yahoo, kita  mengirimkan attachment lebih dari 1 (satu).

Bisa saja data diisi satu persatu setiap prosesnya, namun itu akan memakan waktu. Biasanya user akan menginginkan untuk mengisi data secara komplit terdahulu sebelum diproses. Untuk hal tersebut sebagai pembuat aplikasi kita perlu merancang form input dinamis untuk memudahkan pengguna dalam memasukkan data. Dengan memanfaatkan Jquery, membuat form input dinamis bukanlah hal yang susah.

Contoh Membuat Form Input Dinamis

Berikut contoh sederhana untuk membuat  form input dinamis dengan Jquery. Misalnya user diminta untuk mengisi nama dan hobi, dimana hobi bisa lebih dari satu, maka untuk menambah hobi cukup dengan klik tombol tambah rincian hobi, dan link hapus untuk menghapus elemen form input dinamis.

Membuat Form Input Dinamis

Source Code membuat form input dinamis

Adapun source code untuk membuat  form input dinamis adalah sebagai berikut :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Dinamis</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script language="javascript">
   function tambahHobi() {
     var idf = document.getElementById("idf").value;
     var stre;
     stre="<p id='srow" + idf + "'><input type='text' size='40' name='rincian_hobi[]' placeholder='Masukkan Hobi' /> <a href='#' style=\"color:#3399FD;\" onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>Hapus</a></p>";
     $("#divHobi").append(stre);
     idf = (idf-1) + 2;
     document.getElementById("idf").value = idf;
   }
   function hapusElemen(idf) {
     $(idf).remove();
   }
</script>
</head>
<body>
<div id="container">
<h2>Contoh Form Dinamis</h2>
<form method="post" action="proses.php">
   <input id="idf" value="1" type="hidden" />
   <p> Nama : <input name="nama" type="text" id="nama" size="40"> </p>
   <button type="button" onclick="tambahHobi(); return false;">Tambah Rincian Hobi</button>
   <div id="divHobi"></div>
   <button type="submit">Simpan</button>
  </form>
</div>
</body>
</html>

Penjelasan :

  1. Fungsi untuk menambahkan elemen dalam membuat form input dinamis function tambahHobi() . Dalam fungsi ini perintah untuk menambah elemen form adalah   $(“#divHobi”).append(stre). Perintah ini akan membuat elemen form ditambahkan pada section atau bagian yang memiliki id divHobi, perhatikan pada baris ke-27 terdapat tag <div id=”divHobi”></div>.
  2. Fungsi untuk menghapus elemen form adalah function hapusElemen(idf).

Contoh pengembangan dalam membuat form input dinamis

Contoh Pengembangan Membuat Form Input Dinamis

Untuk download kode membuat form input dinamis silahkan klik disini.

Komentar via Facebook tentang Membuat Form Input Dinamis Dengan Jquery

Komentar tentang Membuat Form Input Dinamis Dengan Jquery

  • Selamat siang pak komang, jika di dalam inputan di sertakan perhitungan per barisnya jadi seperti apa ya..karena saya mencoba buat tetapi malah baris berikutnya ikut dengan perhitungan baris pertama. untuk baris yang di tambah kedua dan berikutnya tidak dapat nilai perhitungan. bisakah d berikan contoh sederhana

  • Silahkan tulis saran, komentar dan pertanyaan dibawah!

    Your email address will not be published. Required fields are marked *