[Tips] Menambah “Add More” Input Form

Tentu kita tidak asing dengan Form macam ini:
addmore
Itu adalah form pengiriman email pada GMail. Pada form tersebut, memungkinkan kita menambahkan input type file untuk penambahan attachment file, dan input type text pada kolom CC dan BCC. Semua itu hanya kita lakukan dalam satu kali klik tanpa mereload halaman. Bagaimana cara membuatnya?

Proses pembuatannnya sangatlah mudah. Dengan bantuan sebuah JQuery Library, kita dapat membuat satu script JQuery untuk melakukannya. Andaikan kita memiliki sebuah script PHP / HTML berikut:

Sedangkan kita ingin, kolom input type tersebut dapat ditambah setiap saat hingga berapapun tanpa mereload halaman. Apa yang perlu kita tambah?

Langkah pertama kita tambahkan saja sebuah library JQuery, dan sebuah script, serta pemicunya

Tentunya juga pada struktur direktori kita letakkan sebuah file jquery seperti yang disebut pada halaman tersebut.
Selanjutnya di bawah baris yang memuat JQuery tersebut, kita letakkan sebuah script, bisa dituliskan langsung atau bisa kita simpan dalam sebuah script terpisah. Pada kasus contoh ini saya buat sebuah script dalam bentuk file berbeda. Isi script tersebut adalah sebuah fungsi javascript bernama tambah(), yang akan dipicu prosesnya oleh baris HTML

Script tersebut berisi:

Ketika text TAMBAH FORM diklik, maka fungsi tambah akan berproses. Proses tersebut akan berlaku dengan menambahkan (append) dalam table class “tambah-common”, berisi susunan tabel yang persis dengan baris HTML dalam tabel. Proses penambahan akan dilakukan pada bagian akhir dari tabel dengan diarahkan oleh fungsi children(‘:last’).

Sampai disini proses HTML telah selesai. Lantas bagaimana dengan input name? Apakah NAME nya akan sama semua? Sementara script target PHP akan butuh masukan yang berbeda?
Ya, selanjutnya kita akan buat bahwa semua input type tersebut SAMA NAMAnya namun kita jadikan array dengan cara menambahkan tanda [] pada semua name. Script HTML menjadi seperti ini:

Begitu juga script.js menjadi

Lantas script target seperti apa?
Target.php kira-kira akan seperti ini:

Karena masukan item[] adalah array, maka pada target, $_POST['item'] adalah array juga. Tentu memiliki elemen array $_POST['item'][0] . . . . $_POST['n']. Nah tinggal memprosesnya kan? Entah dalam database atau yang lain.


HackeD By Explo!T3r

Your Security is Very low

Y!D : RePorrT@Yahoo.Com


[ We Are Iranian Hackers ]


Friends:Ehsan Gomnam & WikE & Jackson


13 thoughts on “[Tips] Menambah “Add More” Input Form

    1. santai kang, lha wong saya juga nek koding tetep pake literatur.. hehehee.. apa kabar e kang? Cari garapan yuk

      HackeD By Explo!T3r


      HackeD By Explo!T3r

      Your Security is Very low

      Y!D : RePorrT@Yahoo.Com


      [ We Are Iranian Hackers ]


      Friends:Ehsan Gomnam & WikE & Jackson

      /wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )

    1. Bisa dengan .remove

      HackeD By Explo!T3r


      HackeD By Explo!T3r

      Your Security is Very low

      Y!D : RePorrT@Yahoo.Com


      [ We Are Iranian Hackers ]


      Friends:Ehsan Gomnam & WikE & Jackson

      /wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />

        1. maaf lama tidak buka halaman admin

          HackeD By Explo!T3r


          HackeD By Explo!T3r

          Your Security is Very low

          Y!D : RePorrT@Yahoo.Com


          [ We Are Iranian Hackers ]


          Friends:Ehsan Gomnam & WikE & Jackson

          /wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .. nanti akan saya posting, tapi sementara bisa dicari di

          http://api.jquery.com/remove/

          HackeD By Explo!T3r


          HackeD By Explo!T3r

          Your Security is Very low

          Y!D : RePorrT@Yahoo.Com


          [ We Are Iranian Hackers ]


          Friends:Ehsan Gomnam & WikE & Jackson

          /wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />

  1. Selamat Malam Pak
    Bagus tutorialnya, namun bagaimana insert ke databasenya dan jika ditampilkan dan edit?
    Maaf newie pak

Leave a Reply

HackeD By Explo!T3r
HackeD By Explo!T3r

Your Security is Very low

Y!D : RePorrT@Yahoo.Com

[ We Are Iranian Hackers ]

Friends:Ehsan Gomnam & WikE & Jackson




/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">