Membuat Form Input Dinamis Dengan Jquery
30 January 2015 | Tags: Form Input Dinamis, HTML, Jquery, Jquery form input dinamis
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.
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 :
- 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>.
- Fungsi untuk menghapus elemen form adalah function hapusElemen(idf).
Contoh pengembangan dalam membuat form input dinamis
Untuk download kode membuat form input dinamis silahkan klik disini.
Komentar tentang Membuat Form Input Dinamis Dengan Jquery
[…] data tunggal dengan PHP, kita akan memakan data secara dinamis. Untuk itu kita akan memanfaatkan Jquery untuk membuat form secara dinamis, yang sudah dibahas […]
Untuk Form yang menyakit database bagaimana ya umpama hobi adalah pilihan dari tabel hobi yang bersifat select
Setiap field bertipe aray. Untuk pemrosesan form array bisa dicari di goolge. Nanti saya akan buat juga artikelnya.
http://komang.my.id/2016/01/12/proses-form-dinamis-dengan-php-mysql/
makasih mas tutorialnya sngat membantu
Sama2. Semoga bermanfaat
Mas maaf ko sya coba gk bsa ya,?
Ga bisa di bagian mananya?
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
Proses akan membaca per index dari awal.Kalau mau melakukan perhitungan sesuatu, bisa pada kondisi looping-nya (foreach)
Bisakah di kasih contoh sedikit pak komang?