Insert Multiple Rows dynamically with Jquery, PHP and MySQL

Jquery
udulnya mbois browww….

Begini ceritanya.pernah suatu ketika saya dikasih tugas di tempat kerja saya yang dulu, untuk membuat aplikasi web. Nah pada aplikasi tersebut terdapat fungsi memasukkan data tetapi secara dinamis (ga satu persatu). Yang dimaksudkan dinamis adalah, kita bisa menambahkan baris dengan sebuah tombol, jadi setiap tombol tersebut di klik, maka akan muncul 1 baris baru di bawahnya untuk menampilkan field inputan. Kalo masih belum mudeng, bisa di lihat di halaman DEMO.

Nah dulu sih, ada contohnya, buatnya pake DOM Javascript, karena fieldnya banyak, maka scriptnya jadi spagetti alias amburadul.. Susah dipelajari, mana yang child, mana yang parent. Ternyata eh ternyata, setelah belajar pake jquery, jquery memiliki fungsi .append() yang bisa digunakan untuk ini.

Dalam demo ini contohnya saya akan menginputkan data mahasiswa dengan field nim, nama depan, nama belakang. Untuk databasenya bisa dibuat sendiri lah (sesuaikan dengan milik Anda). Pada form inputnya dibuat script input seperti biasa, tetapi saya menggunakan tabel agar tampilannya bisa lebih rapi. Kemudian jangan lupa panggil jquerynya ya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="jquery.js"></script> <!-- ini disesuaikan -->
    <script type="text/javascript" src="jquery_append.js"></script> <!-- yang ini juga disesuaikan -->
  </head>
  <body>
  <form id="id_form" action="jquery_dom_save.php" method="post">
    	<table>
    		<tr>
        	<td><input type="button" name="add_btn" value="Add" id="add_btn"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr>
    		<tr>
    			<td>No</td><td>NIM</td><td>Nama Depan</td><td>Nama Belakang</td><td>&nbsp;</td>
    		</tr>
    		<tbody id="container">
<!-- nanti rows nya muncul di sini -->
        </tbody>
        <tr>
	        <td><input type="submit" name=submit value="Save"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	      </tr>
    	</table>
    </form>
  </body>
</html>

Kemudian saya memisahkan file javascriptnya, yang digunakan untuk membuat elemen baru,saya namakan jquery_append.js yang scriptnya sebagai berikut :

$(document).ready(function() {
    		var count = 0;

    		$("#add_btn").click(function(){
					count += 1;
		   		$('#container').append(
							 '<tr class="records">'
						 + '<td ><div id="'+count+'">' + count + '</div></td>'
						 + '<td><input id="nim_' + count + '" name="nim_' + count + '" type="text"></td>'
						 + '<td><input id="nama_depan_' + count + '" name="nama_depan_' + count + '" type="text"></td>'
						 + '<td><input id="nama_belakang_' + count + '" name="nama_belakang_' + count + '" type="text"></td>'
						 + '<td><a class="remove_item" href="#" >Delete</a>'
						 + '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td></tr>'
					);
				});

				$(".remove_item").live('click', function (ev) {
    			if (ev.type == 'click') {
	        	$(this).parents(".records").fadeOut();
                        $(this).parents(".records").remove();
        	}
     		});
		});

Script di atas adalah script javascript yang menggunakan jquery append() untuk membuat elemen. Dan nama elemennya saya buat nama_elemen_ agar nanti setiap penambahana elemen akan ditambahkan prefik dari variabel count yang isinya adalah nomor / angka berurutan. Sehinga pada baris pertama, nama inputnya akan menjadi nim_1, nama_depan_1, nama_belakang_1, kemudian pada baris selanjutnya nim_2, nama_depan_2, nama_belakang_2 dan seterusnya.

Baris

<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="text"></td></tr>

digunakan untuk nantinya menghitung berapa row yang sudah dibuat, digunakan ketika perulangan insert data ke dalam tabel.

 

Saya juga menambahkan link untuk menhapus row jika sekiranya di perlukan. Menggunakan jquery live() karena row yang ditambahkan dibuat menggunakan javascript, sehingga harus menggunakan jquery.live() silahkan baca dokumentasi jquery .live() di sini

Akhirnya script untuk input datanya adalah sebagai berikut:

<?php
	if(isset($_POST['submit'])){
	  $connection = mysql_connect("localhost","root","") or die(mysql_error());
	  mysql_select_db("latihan") or die(mysql_error());
			foreach ($_POST['rows'] as $key => $count ){
				$nim = $_POST['nim_'.$count];
				$nama_depan = $_POST['nama_depan_'.$count];
				$nama_belakang = $_POST['nama_belakang_'.$count];

				$query_2 = "INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belakang) VALUES ('$nim','$nama_depan','$nama_belakang')";

				mysql_query($query_2) or die(mysql_error());
			}

			echo "Data Berhasil disimpan <br>";
			echo "<a href=\"jquery_dom.php\">Kembali</a>";

		mysql_close($connection);

	}else{
		header('Location: jquery_dom.php');
	}
?>

Menggunakan perulangan foreach dengan menghitung $_POST[‘rows’]. Jangan lupa untuk setiap perulangan ditambahkan $count untuk mengambil nilai dari form input yang kita namai setiap field nya dengan name_1, 2 3 dst tadi.

Ada pertanyaan? Silahkan berkomentar, jika ada kesalahan mohon diperbaiki ya,,,

  • dwesty

    ngebantu banget nih mas artikelnya…
    tapi kalau udah di delete kok datanya tetep kesimpen yah ke database…
    data yang udah di ketik trus di delete juga masuk…
    mohon bantuannya,
    terima kasih…

    • mohon maaf atas kekeliruannya, sudah saya perbaiki sricpt nya 🙂

  • dwesty

    maaf mas nanya lagi…
    saya bingung kalau bikin tabel buat nampilinnya dimana?
    soalnya saya coba bikin tabelnya di bawah tulisan data berhasil disimpan dan sebelum mysql close connection trus kalo di refresh datanya nambah sendiri…

    maaf kalo banyak nanya soalnya baru belajar bikin web…

    • kalo masalah refresh kemudian datanya masuk lagi, itu bukan salah coding anda, tetapi memang seperti itu, untuk menghindarinya bisa pake banyak cara, contohnya tampilan data tabelnya Anda bisa pisahkan dari simpan data. Jadi setelah simpan data selesai, Anda redirect ke halaman tampil data tabel tersebut 🙂

  • dwesty

    wah..bisa mas….
    makasih yaa mas…kalau ada yang tidak mengerti saya boleh nanya lagi kan?

  • dwesty

    maaf mas nanya lagi…..
    kalo masukin scrip php ke javascript bisa ga?kalo bisa kaya gimana?
    soalnya saya maiu bikin select option di javascript dari koding yang kayak diatas…
    tapi ga bisa……saya coba bikin begini tapi ga bisa….

    + ‘Barang’
    + ‘: Pilih Barang’ + + ‘$r[nama_barang]’ + +”

    apa ada penulisannya yang salah atau gimana?
    terima kasih……

    • saya rasa walopun bisa itu scriptnya mbulet alias jadi berat 🙂 sebaiknya pake field biasa aja, trus unutk contentnya pake autocomplete . suggest

  • dwesty

    field gimana mksdnya mas??bingung??
    kalo autocomplete itu buat yang search kan…tapi kalo ada updatean nanti ga kedaftar dong…

    • kalo barangnya udah banyak, apa masih pake option select??

      mungkin Anda bisa lihat halaman ini sebagai inspirasi. pada kode item ketik aja huruf “I” tanpa tanda petik

  • dwesty

    maap mas kalo postingannya banyak banget…..
    tapi saya coba dibikin variabel dulu….acak2an sih….bisa tampil select optionnya…tapi tetep ga bisa konek ke database…
    ada yang salah ga mas??

    var koneksi = "<?php $query=mysql_query(SELECT * FROM barang ORDER BY ASC); while($r=mysql_fetch_array($query)){ ?>";
    var tampil_barang = "<?php echo $r[id_barang] ?>";
    var tampil_nama_barang = "<?php echo $r[nama_barang] ?>";
    var tutup_kurawal = "<? } ?>";

    + ‘<td>Barang</td>’
    + ‘<td>: <select id="barang’+ count +’" name="barang’+ count +’"><option value=0 selected>Pilih Barang</option>’+ koneksi +'<option value="’+ tampil_barang +’"> ‘+ tampil_nama_barang +’ </option>’ + tutup_kurawal +'</select></td></tr>’

    • tetep saya rasa kalo Anda memisahkan javascriptnya menjadi file .js tersendiri ga bakal jadi kayaknya, Kan ga mungkin file js ada php nya.

      Untuk kelemahan memakai dropdown menurut saya, jika barangnya udah 1000? apa masih kepikiran pake dropdown?

      coba mungkin Anda lihat halaman ini Contoh aja moga bisa jadi inspirasi.

  • indra

    mas klo yg pakai ci ada contohnya,,,
    masih bingung implementasinya,,
    mohon pencerahanya,,

    • ada di komputer 😀

      sebenernya ga susah susah amat ko, taroh aja tampilan form di view, ganti actionnya ke controller buat nyimpen ex controller function submit.

      Di controller panggil model buat ke database, foreachnya pasang di situ,, jadi deh

  • indra

    boleh minta contoh nya mas,,,
    bisa kirim k email..
    [email protected]
    makasih banyak sebelumnya mas…

    • wah tidak bisa, sorry 🙂

      • indra

        kirain boleh,,,:(
        makasih mas,,,

  • tolong

    ntu yg di contoh ketika ketik huruf i otomatis muncul gmn caranya mas??? ane msh bingung…kan gak mungkin file js ada php nya….. T_T

  • haruno

    ——————————————————————————————————————

    var idrow = 2;

    function tambah(){
    var x=document.getElementById(‘datatable’).insertRow(idrow);
    var td1=x.insertCell(0);
    var td2=x.insertCell(1);
    var td3=x.insertCell(2);
    var td4=x.insertCell(3);
    td1.innerHTML=””;
    td2.innerHTML=””;
    td3.innerHTML=”Laki-lakiPerempuan”;
    td4.innerHTML=””;
    idrow++;
    }

    function hapus(){
    if(idrow>2){
    var x=document.getElementById(‘datatable’).deleteRow(idrow-1);
    idrow–;
    }
    }

    ——————————————————————————————————————
    mas mau nanya klo dropdownnya klo ngambil dari database gimana yah??, di script ni (td3.innerHTML=”Laki-lakiPerempuan”; ) aku tambahin pake PHP tetep gak bisa…mohon bantuannya ya mas….

  • mahilrodok

    kok value dari field2nya gak kebaca ya?

    • dilihat lagi codingnya,,liaht juga demonya 🙂 bisa kan?

  • eddy

    mas dudu, sy mau multiple input, tp pake dropdown dari refrensi database, buat nya di codeigniter, mas dudu, mohon pencerahan, maklum newbie. thx

  • maaf mas mau tanya nih…
    klo misalnya smua data yang sudah di simpen itu saya ingin berada dalam 1 id gimana ya caranya…?
    terima kasih..
    [email protected]

    • 1 id bagaimana?

  • deddy

    mas…mau tanya….saya append udah bisa, tapi kalo misal input type=’text’ nya saya beri class buat css nya kok waktu saya append, tampilannya input text nya standart?? (css nya g bisa jalan)…gmn tuh mas solusi nya ?? thanx

    • ketika saya coba tidak ada masalah, mungkin ada penulisan yang kurang tepat , coba di cek pake firebug.

  • gini mas,,misal saya di textfild itu mau di buat autosugest dari database pake ajax gimana ya..?
    koq coba ga bisa..!

  • al

    pak dudu,
    ada source complete nya pak??? terima kasih

    • emang itu kurang komplit?

  • noe

    Pak Dudu…
    kalo di cakePHP ntu gimana ya??? di controller nya?? di Modelnya???
    huaa,,, bingung ni pak Dudu,,,
    mohon pencerahannya… :'(

    • maaf saya belum pernah pake Cake, tinggal di pisah sesuai fungsinya aja.

  • ekojoharisaputra

    terima kasih sobat artikel nya sangat bermanfaat

  • keren mas artikelnya, tapi lebih keren kalo tombol ‘save’ nya disembunyikan kalo tidak ada row yang di add 🙂

  • Numpang nimbrung.. 🙂

    Kalo buat ke CI nya gimana mas??
    Bikin juga dun..
    Stuck ni..
    🙂

    • sama aja, asal paham konsep MVC di CI

  • mumun

    mas dudu, saran..klo bisa tutorial yg menggunakan framework jgn cuma CI aja tapi symfony 1.0 jg y mas…

    makasih

    • belum pernah pake symfoni.. pengen coba yii tapi belum sempat

  • mas mau nanya kalau kita rubah .php?id=$id dengan .php?id=$id=$nim

    klau query dan cript.a gmna ya mas..?? mohn bantuan.a

  • dion

    mo nanya, isi file jquery.js nya mana ya??

    • ambil dari jquery.com

  • dony

    mas saya mau tanya..
    itu saya coba gabungin multiple rows sama script auto onchange..
    yang bisa onchane cuma rows pertama doank, yang slanjutnya ga bisa onchange..
    apa emang ga bisa di gabungin ya?
    ini script saya
    http://www.4*shared.com/rar/vI7CMrqj/pembelian_tambah.html

  • salam mas dudu.
    mau tanya.

    foreach ($_POST[‘nomor’] as $key => $count ){

    $id_barang = $_POST[‘id_barang’.$count];

    $jum_barang = $_POST[‘itemQty’.$count];

    $sub_total = $_POST[‘itemPrice’.$count];
    }

    pesan errornya ….

    INSERT INTO `trans_beli_det` (`id_trans_beli`, `id_barang`, `jum_barang`, `sub_total`) VALUES (‘SUP-022012-02-2226-02-12-06-08-47’, NULL, NULL, NULL)

    padahal kalau saya echo $id_barang[0];

    keluar ID barangnya.

    foreachnya, ga jalan…. ada solusi lain ga mas ?

    trims

    • $id_barang[0] dari mana? postnya harusnya id_barang1, itemQty1 dst..

  • Prefix nya yang ga jalan ….

  • pratama

    Mas mau sharing multiple rows dikombinasikan dengan JQuery Datepicker. Seperti yg sudah diketahui untuk memanggil datepicker di input text field maka perlu disetting nama “id” sesuai dengan nama function di javascript milik datepicker, tetapi untuk contoh diatas pemanggilan fungsi datepicker dimana y mas ?
    Terimakasih atas berbagi ilmunya 😀

    • dwijonarko

      ganti jadi class, sehingga manggilnya pake tanda dot / titik.

      • candra

        mksdnya di ganti jdi class, gmna mas?
        maf, saya msh bru blajar mas, jdi ndak pham btul,
        saya punya kasus yg sma dengan di atas

  • dhita

    mas klo di field nim pke fitur autocomplete itu gmn mas?

    • digabungkan saja dengan script jquaryui autocomplete

  • Agus Mardi Samekto

    mas scriptnya nggak bisa berjalan
    browser saya memakai Google Chrome dan saya memakai XAMPP

    • coba di cek pake firebug atau developers tools di chromium

      • Agus Mardi Samekto

        sudah bisa mas, tapi ketika saya ganti dari text ke combobox yg menggunakan ajax hanya row pertama saja yg berhasil row kedua dan seterus membaca row pertama. Apakah ada solusinya

  • ilovemyjourney

    mas dudu, saya mau tanya

    di contoh ini kan fungsinya untuk menambah data field box secara dinamis dengan tombol

    jika kondisi nya untuk update data bagaimana ya mas?

    semisal setelah kita insert data dengan nilai :

    1. a
    2. b
    3. c

    dan disimpan (save)

    nah, sekarang saya ingin melihat lagi data yang tadi saya insert
    tapi saya ingin update data / hapus data, dengan teknik seperti artikel ini 😀

    maaf, kalo pertanyaannya agak bingung jelasinnya

  • Agus Mardi Samekto

    Kang, numpang nanya nih script ini apakah bisa digabungkan dengan ajax

    • bisa sekali, agar lebih mudah tinggal digabung pake ajax dengan jquery

  • my Quetion is :
    bagaimana caranya melakukan checking or validasi ke database jika kondisinya multiple validate

    • validasinya pake javascript, bisa pake plugin jquery

  • om dudu udah aku coba om…
    tapi aku bingung di namanya [“name=”nim_’ + count + ‘””]
    terus bagaimana cara checking nim yang udah exist di database ada contohnya tidak om
    terima kasih

    • kayaknya fungsi save nya pake ajax aja, biar bisa validasi seperti itu

  • yah om dudu ..
    ada contoh nya tidak yah karna saya bingung di name [“name=”nim_’ + count + ‘””] itu om dudu

  • febry rizky

    mas, boleh minta scriptnya ngk ?

    buah referensi

    terima kasih

  • eko susanto

    gan saya mw tanya gmn ya klw tutorial diatas kita menampilkannya dengan combobox( atau selectbox ) bukan dengan button. kira2 bisa pakek cara seperti itu atau ada cara lainnya.

    mohon pencerahannya…

  • mizu

    maaf mas klo untuk combo box gmn y ?

  • ewin

    MKsh gan postnya, mau tanya nih? pas ane gabung d scripts lokomedia Hapus nya gak bisa, itu kenapa ya?

    • kemungkinan salah di penulisan javascriptnya

  • toni sukmana

    bagaimana jika inputan nya terkait ke database, seperti select hobi dari tabel hobi.. mohon pencerahan

  • mantab om, akhirnya ketemu juga yang ane cari . . . . thx bgt gan postingan ente sangat ngebantu (y)
    tinggal ane masukin ke CI kelar deh. . .hehehe

  • Andi Mariadi

    Maaf mas saya mau nanya, kok saat simpan error kaya gini ya

    Notice: Undefined index: rows[] in C:xampphtdocsxxxxinput_data.php on line 9

    Warning: Invalid argument supplied for foreach() in C:xampphtdocsxxxxinput_data.php on line 9

    • coba diperiksa bagian javascriptnya, harusnya ada bagian seperti ini

      + '&lt;input id=&quot;rows_' + count + '&quot; name=&quot;rows[]&quot; value=&quot;'+ count +'&quot; type=&quot;hidden&quot;&gt;&lt;/td&gt;&lt;/tr&gt;'
      

      kesalahan itu terjadi karena elemen rows itu belum terbuat

  • oghie

    Maaf mas mau tanya, fungsi deletenya ga jalan ya mas, kira2 apa yg kurang?, makasih mas

    • coba dilihat di firebug atau developer options di browser mungkin ada yang kurang

    • Ahmad Ghazali

      hehhe fungsi delete nya emang gak jalan .. errornya seperti ini di developer option

      jquery_append.js:18 ->>> Uncaught TypeError: $(…).live is not a function

    • Ahmad Ghazali

      oke .. setelah q cari tahu .. tombol delete itu tidak bisa krn jquery yg dipakaii berbeda .. mas dwi pakai jquery 1.6 .. sedangkan q pakai jquery 1.11 .. soalnya pemakaian .live() pada jquery 1.7++ itu berbeda dengan yg versi dibawahnya .. kalau mau yang instan pakai yg 1.6 .. aq terpaksa gitu soalnya gk mudeg tentang javascript

  • Avil Riadi

    kenapa tombol deletenya engga bisa ya

    scriptnya saya buat begini :

    $count ){

    $nim = $_POST[‘nim_’.$count];

    $nama_depan = $_POST[‘nama_depan_’.$count];

    $nama_belakang = $_POST[‘nama_belakang_’.$count];

    $query_2 = “INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belakang) VALUES (‘$nim’,’$nama_depan’,’$nama_belakang’)”;

    mysql_query($query_2) or die(mysql_error());

    }

    echo “Data Berhasil disimpan “;

    echo “Kembali“;

    mysql_close($connection);

    }else{

    //header(‘Location: jquery_dom.php’);

    }

    ?>

    title

    $(document).ready(function() {

    var count = 0;

    $(“#add_btn”).click(function(){

    count += 1;

    $(‘#container’).append(

    + ” + count + ”

    + ”

    + ”

    + ”

    + ‘Delete

    + ”

    );

    });

    $(“.remove_item”).live(‘click’, function (ev) {

    if (ev.type == ‘click’) {

    $(this).parents(“.records”).fadeOut();

    $(this).parents(“.records”).remove();

    }

    });

    });

       

    NoNIMNama DepanNama Belakang 

       

    • jquery live udah ga disupport lagi, coba ganti pake jquery on

    • Fijar Hafiizh

      Diganti jquery on aja mas. tambahkan javascriptnya dulu

      lalu scriptnya diganti jadi

      $(“.remove_item”).on(‘click’, function (ev) {

  • Nur

    maaf mas mau tanya, saya pakai jquery 1.9 kok fungsi delete nya gak galan ya? saya sudah coba ganti live dengan on (karena katanya di jquery 1.9 diganti on). tapi tetap tidak jalan, mohon pencerahannya, terimakasih sebelumnya..

    • karena jquery live sudah deprecated, bisa diganti jquery on

      As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().