Selamat datang di blog arsipbertuah. Pada posting ini ane akan membahas Bagaimana cara membuat kolom input di form html bisa ditambah dan dihapus sesuai dengan kebutuhan. inilah yang dinamakan dengan form dinamis, yang mana form tersebut kolom input tidak di tetapkan jumlahnya dalam satu halaman tersebut melainkan bisa berubah-ubah sesuai kebutuhan. agar bisa membuat form dinamis di halaman html ini tentunya kita bisa menipulasi halaman html menggunakan javascript, tapi pada artikel ini ane menggunakan JQuery karena scriptnya lebih simple dan mudah.
jQuery adalah salah satu framework javascript atau javascript library yang telah dirancang untuk mempermudah mendesain halaman web di bagian user interface. untuk menjalankan script dibawah ini, ane asumsikan agan sudah paham untuk menggunakan jquery. jika belum bisa instal jquery bisa baca di artikel ane tentang instalasi jquery . berikut ini adalah script jquery serta form htmlnya untuk praktek membuat form dinamis.
<html>
<head>
<title>Form Dinamis</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script language="javascript">
function tambahPemain() {
var id = document.getElementById("id").value;
var inputbaru;
inputbaru="<p id='kolombaru" + id + "'><input type='text' size='40' name='namapemain[]' placeholder='Masukkan nama pemain' /> <a href='#' onclick='hapusPemain("#kolombaru" + id + ""); return false;'>Hapus</a></p>";
$("#pemain").append(inputbaru);
idf = (idf-1) + 2;
document.getElementById("id").value = id;
}
function hapusPemain(id) {
$(id).remove();
}
</script>
</head>
<body>
<div id="container">
<center>
<h1>Contoh Form Dinamis menggunakan Jquery</h1>
<form method="post" action="simpan.php">
<input id="id" value="1" type="hidden" />
<p> Nama Club: <input name="nama" type="text" id="namaklub" size="40"> </p>
<button type="button" onclick="tambahPemain(); return false;">Tambah Pemain</button>
<div id="pemain"></div>
<button type="submit">Simpan</button>
</form>
</center>
</div>
</body>
</html>
script diatas adalah contoh dasar membuat form dinamis. agan bisa memodifikasi sesuai dengan kebutuhan projek agan dengan tampilan yang lebih menarik contohnya seperti projek ane pada gamabar dibawah ini. |
| gambar form dinamis |
selanjutnya kita bahas bagaimana untuk menyimpannya ?. nah berikutnya kita buat lagi sebuah file dengan nama Simpan.php namun sebelumnya buat dulu database nya dengan nama db klubfutsal dan nama tabel pemain dengan struktur tabel nya contohnya satu fieldsaja (pemain). sorce code php simpan.php nya seperti berikut ini;
<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbnm = "futsal";
$koneksi = mysql_connect ($host, $user, $pass);
if ($conn) {
$buka = mysql_select_db ($dbnm);
}
$player = $_POST['namapemain'];
foreach ($player as $pemain) {
$query=" INSERT into pemain (player)values ('$pemain');";
}
?>
seperti itulah contoh sederhana menggunakan dinamis form menggunakan jquery dan cara menyimpannya. semoga dapat membantu menambah referensi. salam developer
ane belom paham gan, bisa dijelaskan ldbih detail gk?
ReplyDeletedi bagian mananya gan..?
Deletekalo fieldnya 3, di source code simpannya gmn?
ReplyDeletenice information min
ReplyDeletelampu servis hp led