<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>

Keterangan:

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.

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);

    });

});

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

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: <?php>

<!-- PHP untuk memproses data dalam bentuk array yang dikirim oleh form -->

<?php

if(!empty($_POST['alltotal'])){

echo '<pre>';

echo 'Harga satuan:';

print_r($_POST['satuan']);

echo 'Harga jasa:';

print_r($_POST['jasa']);

echo 'Sub total:';

print_r($_POST['subtotal']);

echo 'All total: '.$_POST['alltotal'];

echo '</pre>';

exit;

}

?>

<a href="http://ibacor.com/blog/membuat-penjumlahan-di-form-input-dinamis-dan-menyimpan-data-menggunakan-ajax" target="_BLANK"><h1>Tutorial</h1></a>

<!-- 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> Sub total (Tidak di isi) : <input name="subtotal[]" type="text" id="total-0" class="total" readonly="readonly"> </p>

</div>

<p> All total (Tidak di isi) : <input name="alltotal" type="text" id="total" readonly="readonly"> </p>

<button id="tambah">Tambah</button>

<button id="simpan">Simpan</button>

</form>

<div id="output"></div>

<!-- jQuery -->

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

// proses menambah inputan

$('#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> Sub total (Tidak di isi) : <input name="subtotal[]" type="text" id="total-' + i + '" class="total" readonly="readonly"> </p>';

    input += '</div>';

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

    i++;

    return false;

});

// proses menghapus inputan

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

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

});

// proses menghitung total value inputan

$('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),

                subtotal = parseInt(satuan) + parseInt(jasa);

            if (!isNaN(subtotal)) {

                $('#total-' + berhitung[1]).val(subtotal);

var alltotal = 0;

$('.total').each(function(){

alltotal += parseFloat($(this).val());

});

                $('#total').val(alltotal);

            }

        }, 50);

    });

});

// proses untuk mengirim semua data inputan yang ada di form menggunakan jquery POST atau GET ke server

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

    // contoh => var url_proses = proses.php

    var url_proses = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>";

    $.post(url_proses, $("#data").serialize(), function(response) {

        $('#output').html(response);

    });

    return false;

});

</script>

Source : http://ibacor.com/