Login
Membuat Penjumlahan di Form Input Dinamis dan Menyimpan Data Menggunakan Ajax

Membuat Penjumlahan di Form Input Dinamis dan Menyimpan Data Menggunakan Ajax

Hallo sobat kali ini saya akan share tutorial membuat penjumlahan data dimana inputan.y itu dinamis dan proses menyimpan data.y menggunakan ajax jadi tentunya harus menggunakan bantuan javascript atau jQuery. Namun ditutorial ini saya akan coba menggunakan jQuery karna kalo pure javascript saya belum kataekan gan :D.

Ok.. langsung saja pertama-tama kita buat formnya dulu misalnya di index.html:

<form id="data">
    <div id="box">
        <p> Harga satuan : <input name="satuan[]" type="text" id="satuan-0" class="hitung"> </p>
        <p> Harga jasa : <input name="jasa[]" type="text" id="jasa-0" class="hitung"> </p>
        <p> Total (Tidak di isi) : <input name="total[]" type="text" id="total-0" readonly="readonly"> </p>
    </div>
    <button id="tambah">Tambah</button>
    <button id="simpan">Simpan</button>
</form>
<div id="output"></div>

Keteranga:

1. id="data" untuk menampung semua data serialize yang ada di form yang nanti akan di kirim menggunakan jQuery POST atau GET.
2. id="box" tempat untuk menampilkan input dinamis yang nanti akan di .append().
3. Semua inputan diberi name berbentuk array karena inputannya dinamis lebih dari satu namun berada di dalam satu form.
4. Semua inputan diberi class="hitung" kecuali input total, gunanya untuk mendapatkan nama id di inputan tersebut.
5. Sedangkan id yang ada di masing2 inputan gunanya untuk menjumlhkan value inputan dan menmpilkan totalnya.
6. id="tambah" selector tombol untuk membuat inputan baru.
7. id="simpan" selector tombol untuk mengirim data inputan/menjalankan jquery POST atau GET.
8. id="output" untuk menampilkan respon server/output yang di kirim server.

Nah sekarang kita ke bagian jQuerynya, pertamatama kita buat fungsi input dinamis ketika id="tambah" di click:

$('#tambah').click(function() {

    var i = $('input').size() + 1,
        input = '<div id="box' + i + '"><a href="#" id="hapus" color="red">hapus</a>';
    input += '<p> Harga satuan : <input name="satuan[]" type="text" id="satuan-' + i + '" class="hitung"> </p>';
    input += '<p> Harga jasa : <input name="jasa[]" type="text" id="jasa-' + i + '" class="hitung"> </p>';
    input += '<p> Total (Tidak di isi) : <input name="total[]" type="text" id="total-' + i + '" readonly="readonly"> </p>';
    input += '</div>';

    $('#box').append(input);

    i++;
    return false;

});

Lanjut membuat fungsi untuk menghapus inputan ketika id="hapus" di click:

$('body').on('click', '#hapus', function() {

    $(this).parent('div').remove();

});

Lalu fungsi untuk menjumlahkan data yang kita input ketika mengetik di class="hitung" lalu menampilkan totalnya.

$('body').on('focus', '.hitung', function() {
    var aydi = $(this).attr('id'),
        berhitung = aydi.split('-');
    $(this).keydown(function() {
        setTimeout(function() {
            var satuan = ($('#satuan-' + berhitung[1]).val() != '' ? $('#satuan-' + berhitung[1]).val() : 0),
                jasa = ($('#jasa-' + berhitung[1]).val() != '' ? $('#jasa-' + berhitung[1]).val() : 0),
                total = parseInt(satuan) + parseInt(jasa);
            if (!isNaN(total)) {
                $('#total-' + berhitung[1]).val(total);
            }
        }, 50);
    });
});

Nah untuk pembuatan form input dinamis dan penjumlahannya sudah selesai, sekarang kita tinggal membuat proses pengolahan datanya di bagian server side.

Pertama-tama kita buat sebuah file dengan nama proses.php lalu masukan kode di bawah ini:

<?php
    echo '<pre>';
    echo 'Harga satuan:';
    print_r($_POST['satuan']);
    echo 'Harga jasa:';
    print_r($_POST['jasa']);
    echo 'Total:';
    print_r($_POST['total']);
    echo '</pre>';
?>

Kode php di atas fungsinya untuk mengecek apakah data yang di kirim ke server benar2 terkirim.

Lalu bagaimana cara mengirim data yang ada di form ke servernya??

Ok seperti yang sudah saya jelaskan dari awal pengiriman datanya akan menggunakan AJAX atau jQuery POST/GET biar kekinian :D

Berarti sekarang kita buat proses pengiriman datanya ketika id="simpan" di click tapi saya akan menggunakan jQuery POST karna di proses.php saya menggunakan method POST, brikut kodenya:

$('#simpan').click(function() {
    var url_proses = "proses.php";
    $.post(url_proses, $("#data").serialize(), function(response) {
        $('#output').html(response);
    });
    return false;
});

Untuk demo dan full kodenya sobat bisa melihatnya di bawah:

Sekian tutrial kali ini semoga bermanfaat wasalam :)