Jquery Duplicate Field Form

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.

 

Share |

Portfolio

www.wearnespc.comwww.solper.comwww.autojaya.comwww.intisolar.comsmartprint.co.idwww.ottopharm.comoliser.co.idAnd More ....

Livechat

  • Sonny
    Marketing

  • Aris G
    Support

  • Agus
    Support

  • Kurnianto
    Support

  • Eko P
    Designer

  • Andreas
    Designer

  • LiveZilla Live Help

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Phone : 021 - 2636 3170
    021 - 3377 0050
     
Mobile : 0856 - 9360 1378
    0812 - 806 2772
    0857 - 1586 8992
    0816 - 180 8005
     
Blackberry PIN : 23096502
     
Fax : 021 - 633 5765
     
Web : www.proweb.co.id