Insert Multiple Rows dynamically with Jquery, PHP and MySQL

83 Replies

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.

[html]
<!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>
[/html]

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

[javascript]
$(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();
}
});
});

[/javascript]

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

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

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]
<?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’);
}
?>

[/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,,,

83 thoughts on “Insert Multiple Rows dynamically with Jquery, PHP and MySQL”

  1. 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…

    Reply ↓
  2. 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…

    Reply ↓
    1. dudu Post author

      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 🙂

      Reply ↓
  4. 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……

    Reply ↓
    1. dudu Post author

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

      Reply ↓
  5. dwesty

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

    Reply ↓
    1. dudu Post author

      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

      Reply ↓
  6. 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>’

    Reply ↓
    1. dudu Post author

      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.

      Reply ↓
    1. dudu Post author

      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

      Reply ↓
  9. 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

    Reply ↓
  10. 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….

    Reply ↓
  12. eddy

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

    Reply ↓
  14. 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

    Reply ↓
  25. andi

    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

    Reply ↓
  27. 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 😀

    Reply ↓
      1. 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

        Reply ↓
      1. 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

        Reply ↓
  30. 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

    Reply ↓
  33. badruz

    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

    Reply ↓
  36. 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…

    Reply ↓
  41. 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

    Reply ↓
    1. Dwi Wijonarko

      coba diperiksa bagian javascriptnya, harusnya ada bagian seperti ini
      [javascript]
      + ‘&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;’
      [/javascript]

      kesalahan itu terjadi karena elemen rows itu belum terbuat

      Reply ↓
    2. 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

      Reply ↓
    3. 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

      Reply ↓
  43. 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 

       

    Reply ↓
    2. Fijar Hafiizh

      Diganti jquery on aja mas. tambahkan javascriptnya dulu

      lalu scriptnya diganti jadi

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

      Reply ↓
  44. 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..

    Reply ↓
    1. Dwi Wijonarko

      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().

      Reply ↓

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.