Dalam pembuatan sebuah aplikasi dapat kita temukan sebuah form yang digunakan untuk input data. Namun, coba kita bayangkan apabila data yang akan dimasukkan sangat banyak, maka sebanyak itu pula kita akan mengklik tombol submit untuk menyimpan data yang diisikan.
Lalu bagaimana cara mengatasinya?
Seperti apa solusinya?
Nah, dengan menggunakan JQuery hal seperti itu bisa dikurangi atau dihindarkan.
Langsung saja kita bahas di bawah ini.
Untuk kasus ini dibutuhkan file jquery.min.js dan file javascript untuk proses penggandaan atau duplikasi field.
<html>
<head>
<title>Jquery Duplicate Field Form</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”/js/jquery.min.js”></script>
<script type=”text/javascript” src=”/js/duplicate.js”></script>
<script type=”text/javascript”>
$(function(){
var removeLink = ‘ <a class=”remove” href=”#” onclick=”$(this).parent().fadeIn(function(){ $(this).remove() }); return false”>remove</a>’;
$(‘a.add’).relCopy({ append: removeLink});
});
</script>
<style type=”text/css”>
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; }
a.remove {color:#cc0000; text-decoration: none;}
a.input{ border: solid 1px #006699; padding:3px;}
td a.add { text-decoration: none; }
</style>
</head>
<body>
<form method=”post” action=””>
<table>
<tr >
<td align=”center”>Name</td>
<td align=”center”>Email</td>
<td align=”center”>Phone</td>
<td align=”center”>Address</td>
<td align=”center”>Message</td>
</tr>
<tr class=”clone”>
<td><input type=”text” name=”nama []” class=”input”></td>
<td><input type=”text” name=”email[]” class=”input”></td>
<td align=”center”><input type=”text” name=”telepon[]” class=”input” size=”9″></td>
<td align=”center”><input type=”text” name=”alamat[]” class=”input” ></td>
<td><input type=”text” name=”pesan[]” class=”input”></td>
</tr>
<tr>
<td colspan=”5″ align=”right”><a href=”#” class=”add” rel=”.clone”>add more</a></td>
</tr>
<tr>
<td colspan=”5″ align=”center”><input type=”submit” value=” Submit ” /></td>
</tr>
</table>
</form>
</body>
</html>
Dapat dilakukan pengaturan berapa batas maksimal field yang dapat ditambahkan. Pada file proses duplikasi, masukkan angka yang diinginkan pada bagian limit. Angka 0 artinya tidak ada pembatasan sama sekali.
Mudah bukan?
Klik disini untuk melihat demo.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.