Dalam sebuah form, kadang kita memerlukan beberapa field input yang diperuntukan berisi angka dan secara otomatis menjumlah angka yang dimasukan user. Misalnya pada sebuah form pemesanan/ order barang, user memasukan pesanan barang A dengan jumlah tertentu, kemudian barang B dengan jumlah tertentu, … lalu total jumlah pesanan akan dihitung secara otomatis. Nah, sudah ada gambaran, kan?
Untuk contoh script hitung form php, saya menggunakan contoh kasus cicilang angsuran. Formnya seperti di bawah ini
Demo form php dengan penjumlahan hitung otomatis
Pada saat pengunjung mengisikan angka pada form input field Angsuran Pokok, Angsuran Bunga, dan Discount, maka field jumlah akan secara otomatis terisi. Pada form di atas, angka pada Discount Angsuran akan otomatis mengurangi.
Untuk membuat form dengan penjumlahan atau hitung otomatis, kita perlu menambahkan javascript. Ada script tambahan javascript untuk form hitung php di atas, script tersebut adalah seperti di bawah ini:
[cc lang=”javascript”]<script>
function startCalc(){
interval = setInterval(“calc()”,1);}
function calc(){
one = document.autoSumForm.angsuran_pokok.value;
two = document.autoSumForm.angsuran_bunga.value;
three = document.autoSumForm.diskon.value;
document.autoSumForm.jumlah.value = (one * 1) + (two * 1) – (three * 1);}
function stopCalc(){
clearInterval(interval);}
</script>[/cc]
javascript di atas diletakan di bagian head html/ php anda. Perhatikan script di atas, saya menggunakan nama angsuran_pokok, angsuran_bunga, diskon , dan jumlah untuk nama-nama field form saya. Sedangkan untuk formnya saya menggunakan nama autoSumForm.
dalam penulisan script, angsuran_pokok, angsuran_bunga, diskon diwakilkan dengan one, two, dan three
sehingga penulisannya dalam javascript seperti ini:
[cc lang=”javascript”]one = document.autoSumForm.angsuran_pokok.value;
two = document.autoSumForm.angsuran_bunga.value;
three = document.autoSumForm.diskon.value;[/cc]
Jika Anda berniat membuat form dengan jumlah field lebih dari tiga, maka silahkan disesuaikan dengan menambahkan four, five, … dst.
Dari script di atas akan menghitung otomatis seperti ini:
(angsuran_pokok + angsuran_bunga) – diskon = jumlah
maka dalam penulisan di javascript seperti ini :
[cc lang=”javascript”]document.autoSumForm.jumlah.value = (one * 1) + (two * 1) – (three * 1);[/cc]
autoSumForm adalah nama formnya nanti, anda dapat menggunakan dengan nama lain.
sedangkan untuk formnya, masing-masing field input menggunakan atribut onFocus=”startCalc();” onBlur=”stopCalc();” . Untuk code html form dapat dilihat di bawah ini:
[cc lang=”php”]<form name=’autoSumForm’ >
<table border=’0′ width=’80%’ align=’center’ >
<tr>
<td><b>Angsuran Pokok</b> </td>
<td><input type=’text’ name=’angsuran_pokok’ style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td><b>Angsuran Bunga</b> </td>
<td><input type=’text’ name=’angsuran_bunga’ style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td><b>Discount Angsuran</b> </td>
<td><input type=’text’ name=”diskon” style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td>Jumlah</td>
<td><input readonly type=text value=’0′ name=”jumlah” onchange=’tryNumberFormat(this.form.thirdBox);’ readonly> </td>
</tr>
<tr><td colspan=’2′>
</td></tr>
</table>
</form>[/cc]
jadi , untuk code php atau php secara lengkap adalah seperti ini:
[cc lang=”php”]<html>
<head>
<script><!–
function startCalc(){
interval = setInterval(“calc()”,1);}
function calc(){
one = document.autoSumForm.angsuran_pokok.value;
two = document.autoSumForm.angsuran_bunga.value;
three = document.autoSumForm.diskon.value;
document.autoSumForm.jumlah.value = (one * 1) + (two * 1) – (three * 1);}
function stopCalc(){
clearInterval(interval);}
</script>
</head>
<body bgcolor=”#E6E6FA”>
<form name=’autoSumForm’ >
<table border=’0′ width=’80%’ align=’center’ >
<tr>
<td><b>Angsuran Pokok</b> </td>
<td><input type=’text’ name=’angsuran_pokok’ style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td><b>Angsuran Bunga</b> </td>
<td><input type=’text’ name=’angsuran_bunga’ style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td><b>Discount Angsuran</b> </td>
<td><input type=’text’ name=”diskon” style=”text-align:right;” size=’23’ onFocus=”startCalc();” onBlur=”stopCalc();” /></td>
</tr>
<tr>
<td>Jumlah</td>
<td><input readonly type=text value=’0′ name=”jumlah” readonly> </td>
</tr>
<tr><td colspan=’2′>
</td></tr>
</table>
</form>
</body>
</html>[/cc]
Dari contoh script php hitung penjumlahan secara otomatis pada form , anda dapat memodifikasinya sesuai keperluan Anda. Silahkan di download contoh script secara lengkap untuk anda pelajari.
password zip : www.bayuajie.com
Punya saya kok nggak jalan ya gan? bedanya saya menggunakan OOP.
wah,ndak tau gan, .. gak ngerti oop. beda script beda hasil, sedikit modifikasi saja, bisa beda hasil. script ini bukan saya yang buat, saya cuma memodifikasi sesuai kebutuhan saja.
mas klo script coding menghitung tarif dan jarak seperti ojek online..tapi kga memakai maps mass
mohon bantuannya
saya belum tau sistem yang dimaksud, saya sendiri belum tau dan belum pernah nyoba ojek online jadi gak tau gambarannya…. klo misalnya gini sudah ada ketetapan tarifnya per Km atau per meter begitu dan disimpan di database, dan tinggal masukin jaraknya (misalnya dengan memilih/klik nama kota/jalan) … seperti itu mungkin, sob? …. gambaran tampilannya seperti menghitung tarif ongkir JNE, atau ongkir di bukalapak, klo seperti itu kemungkinan besar saya bisa, sob. Tinggal cari script source code trus edit sana sini … ahahaha 😀
bang mau tanya, kalo cara seting biar hasil angka di belakang koma cuma 2 angka bgimana ya bang?
sebelumnya terima kasih, tutorial di atas saya terapkan di program perhitungan saya bisa
terima kasih atas tutorialnya mas..
oya kalo boleh tanya, kalo mau nampilkan hasil data yang udah otomatis dijumlahkan kaya gimana ya ?
pertanyaannya tidak jelas dan multi tafsir… saya gak ngerti maksudnya. Itu kan sudah ditampilkan hasil penjumlahannya.
maksud pertanyaannya gimana nih, bisa diperjelas?
itu kan bisa untuk di masukan di form input data , misalkan kita pakai untuk form edit masih bisa ??
bisa, penerapannya dengan cara dimodifikasi sesuai kebutuhannya.
terimakasi banyak sangat membantu sekali
sama sama
kak kalo tablenya array cara jumlahinnya gimana ya?
halo, bayu puguh,
saya tidak mengerti maksud pertanyaaanya, pertanyaannya kurang spesifik… contoh script ini tidak menggunakan tabel dan langsung menjumlahkan input yang dimasukan user, dengan menggunakan javascript.
jika ingin menjumlahkan data yang sudah ada dalam tabel, menggunakan query : select sum()
misalnya: SELECT SUM(column_name) FROM table_name;
Sudah Bagus. ubah sesuai dengan kebutuhan aja.
bermanfaat sekali
Terima kasih, Ayu. Senang kalau bisa bermanfaat buat yang lainnya 🙂
terima kasih tutorialnya sangat membantu sekali 🙂
Sama-sama, sis.
senang coretannya bisa berguna
terimakasih mas
saya mau tanya, untuk penjumlahan dalam tabel tidak bisa untuk banyak record, adakah caranya agar bisa?
Halo Gading,
tidak bisa nya kenapa? ada pesan error atau gimana? dalam tabel apa ya, database mysql? menggunakan script ini? bisa dilampirkan scriptnya?
tidak ada pesan error, untuk script saya pakai punya mas bayu, nah persis seperti menampilkan data dari database kan saya pakai while, nah ketika data lebih dari satu baris, fungsi hitung otomatisnya tidak berfungsi, tetapi kl data hanya satu baris bisa dijalankan fungsi hitung otomatisnya
saya tidak berkomentar banyak, karena anda tidak melmpirkan codenya..
mas mau nanya itu bagian yang “onchange=’tryNumberFormat(this.form.thirdBox);’ ” maksud this.form.thirdBox apa ya? diambil data dari box ketiga?
Hi Adit, terima kasih mengingatkan, onchange=’tryNumberFormat(this.form.thirdBox); sebenarnya tidak berfungsi apapun, dihapuspun tidak masalah… silahkan dicoba. .. Itu ikut tercopy pada scriptnya waktu saya memberi contoh di sini, …jika tidak salah itu fungsi sewaktu digabungkan dengan script lain untuk membuat tanda . (titik) atau , (koma) untuk memisahkan ribuan. … saya asal comot aja contohnya dari koleksi script saya hehehe… Script sudah saya betulkan, saya hapus atribut tersebut.
Permisi gan, mau tanya kenapa field nya tipe text semua ya ?
memangnya kenapa, gan? ada masalah?
kalau perkalian dan pengurangan otomatis kayak gini gmn mas ??
a * b = c kemudian hasil nya (c) itu kita kurangi dengan d
bukan kayak gini mas : a * b – c = hasil
tapi a * b = c , stelah muncul hasilnya c , baru kita masukan fild lagi ,, kemudian muncul deh hasil nya yg di ingin kan.
contoh 5 * 5 = 25 – 30 = 5. begitu mas,, bantu donk coding nya.. maksih.
mungkin tidak sama persis yang diinginkan, silahkan lihat contohnya di form php perkalian dan pengurangan secara otomatis
terimakasih utorialnya sanagt membantu..alhamdulillah berhasil saya terapkan pada program menghitung nilai akhir,,tapi boleh minta tambahan lagi gak utnuk menampilkan grade nilai otomatisnya gmna ya kira kira gan?
halo teti, senang scriptnya bisa menginspirasi ,.. hehehe
tentang pertanyaannya, saya tidak mengerti betul yang diinginkan, teti. jika maksudnya menampilkan nilai atau angka tertentu dari tabel database ke dalam field input, .. maka bisa dilakukan dengan query select, lalu hasil select dimasukan ke dalam inputan form. semoga terjawab pertanyaannya…. jika belum terjawab dan masih bingung, bisa tanya langsung via WA, atau via email dengan melampirkan script dan databasenya.
maksud saya begini..script anda sudah saya terapkan,tetapi pada program menghitung nilai, nilai akhir yang dihasilkan kan tsudah tampil secara otomatis pada form, pertanyaan saya,bisa tidak kalau grade nilainya juga tampil pada form secara otomatis?.mohon bantuannya gan,terimaksih.
masih belum ngerti saya, grade nilainya tampil secara otomatis? ditampilkannya berdasarkan seleksi dari tabel database? scriptnya dihubungkan dengan database mysql, tidak?
pada intinya kemungkinan besar bisa… saya perlu lihat scripnya dulu, baru bisa berkomentar, apakah saya bisa atau tidak.
tidak ada seleksi ke database mas..grade nilainya maksud sya langsung tampil berdasarkan hasil dari nilai akhir trsebut.
wah sepertinya saya tidak bisa, atau setidaknya belum bisa. perlu mahir javascript sepertinya 😀 , mungkin kalau nanti saya menemukan script yang mirip saya kabari.
jadi ketika form pada nilai akhir terisi secara otomatis, maka form grade nilainya juga demikian
ini masnya yang gak ngerti atau mungkin analisa saya yang kurang pas 😀
Saya mengerti maksudnya, cuma saya tidak bisa/belum bisa membuat contoh scriptnya, karena itu menggunakan javascript, saya bener2 buta javascript 😀 … yang mungkin saya bisa adalah: perlu klik submit dahulu (POST formnya), lalu berdasarkan data yang di submit/post nanti muncul gradenya, … jadi ga otomatis, yang otomatis muncul gradenya seperti yang anda dimaksud, saya tidak bisa/belum bisa.
halo mas bayu saya mau tanya dong
saya pengen buat tabel di php modelnya kayak di excel,jadi saya cukup tuliskan satu inputan,satu rumus saja..
naaah kalo di excel selnya di drag kebawah dia bisa buat perhitungan otomatis, misalnya sampe 10 sel kebawah udah terhitung otomatis
nah kalo di php buatnya pake apa ya?mohon pencerahannya ya mas bayu ajie…makasih banyak bangettt
halo avista, untuk membuatnya di php, harus dihubungkan ke database mysql. klo di excel menggunakan rumus, di php menggunakan query lalu loop dengan while.
setahu saya, jika hanya membuat tabel tanpa dihubungkan ke database tidak akan mungkin dapt menampilkan data table, karena data tabel digenerate dari tabel mysql. Coba googling tentang cara menampilkan table mysql di php, atau coba googling php crud. beberapa contoh script di blog ini juga menampilkan data di mysql ke php.
Mas Saya menjumpai Kendala Mohon dilihat, saya upload di GD https://drive.google.com/file/d/0By7do4Jd5LH7Wm4wNGJWdFpfUVE/view sekiranya dapat membantu saya yang masih newbie ini. Terima Kasih sebelumnya mas.
kalau sebelumnya scriptnya bisa berjalan, berati kesalahannya paling pada peletakan scriptnya, sudah diletakkan scriptnya dengan benar, termasuk javascript dan attribut pada field formnya? cek lagi dan cek lagi cocokan dengan script yang sudah berjalan tadi. mungkin ada yang lupa diganti, atau terlewat.
coba perhatikan dengan seksama: anda telah memasukan scriptnya dalam perulangan while , mungkin disitulah terjadi masalahnya… saran saya, tes dulu dengan SATU pop up saja, tidak menggunakan looping while… coba apakah bisa berjalan dalam modal pop up.
selamat malam gan,
saya mau bertanaya, saya punya kasus gini, di satu form input bisa memasukan berulangkali nilai kemudian ada button di button itu bisa menjumlah otomatis ke form input yang satu tapi form input yang satu disabel
contoh saya masukan nilai pertama kemudian klik button hasil muncul di text box yang disebel kemudian saya input nilai lagi kemudian klik button secara otomatis di text box itu terjumlah hasilnya
Sekian dan terimakasih
selamat malam, arik
bisa saja membuat form seperti itu, dalam bayangan saya nanti ada multi form, jadi ada beberapa form. nantinya pada form pertama nilai yang dimasukan ke dalam field form saat di klik button submit, nanti di munculkan di value field form kedua dengan menggunakan php echo dan didasable field formnya, … lalu memasukan nilai dan di klik submit, proses post form kedua dan muncul di form ketiga dengan hasil penjumlahannya. namun jika ingin penjumlahannya secara otomatis saat dilakukan klik button,tanpa harus berpindah form dan tanpa refresh/loading halaman, saya belum tahu cara membuatnya..
seperti itu yang dimaksud apa bukan?
Mas bisa ajarin saya buat bikin subtotal yg gak ?Mohon balasannya mas
ajarin bagaimana? itu sudah ada contoh scriptnya, dan sudah ada demonya. silahkan dicoba modifikasi sendiri sesuai keperluan. coba dimengerti script dan penjelasannya.
selamat malam mas bayu saya mau tanya nih
didatabase saya sudah ada nilai harga,nah disini saya pengen otomatis kaya dicontoh tutorial disini,
kan saya tinggal buat inputan jumlah,,
harga|jumlah |total
500 |input jumlah|otomatis keluar total
gimana caranya buat otomatis tp datanya ambil dr database?
mohon dibls
tutorial ini bermanfaat bgt mas makasih
selamat pagi Yedi,
kalau datanya sudah ada di database, ya tinggal dipanggil saja datanya dari database dengan query select tabel dan nama kolomnya, menggunakan php.
lalu data hasil select dimasukan ke dalam field input. sehingga nanti muncul otomatis datanya di field input.
mungkin tidak sama persis, tapi script di sini mempunyai ide yang sama:
https://www.bayuajie.com/blog/2017/08/script-order-barang-dengan-multiple-insert-database/
bisa dilihat dan dipelajari.
Terima kasih artikel anda sangat bermanfaat untuk saya pelajari sendiri
kalo ditambah dengan format rupiah gmn ya?
sebelumnya thanks function diatas berguna 🙂
halo rendy,
untuk format rupiahyang dimaksud ituformat ribuan,titik tiap 3 angka?
kalau betul itu yang dimaksud,maka ada artikelnya diposting blog ini,silahkan dibrowsing.
tapi jika untuk diterapkan dalam script ini,hitung otomatis, hasilnya akan error.karena angka di belakang koma dianggap angka desimal, sehingga hasil penjumlahan tidak sesuai dengan yang diharapkan.
Tapi jika menginginkan, mungkin bisa saya usahakan 🙂
Selamat sore mas, ini sesuai dengan yang sedang saya butuhkan, dimana diinput dan hasilnya memakai “.” Untuk memisah angkanya, kalau ada script nya mungkin bisa dishare mas saya lagi butuh, terimakasih
saya juga sedang mencari yang diinput dan hasilnya memakai “.” mungkin mas bayu ada contohnya dan bisa dishare mas
Terima kasih yah, sangat membantu saya 🙂
Punya saya jumlahnya belum bisa jalan dan ada tulisan a€™0a€² . Solusinya gimana ya?
tulisan apa?
kalau scriptnya dari hasil download tanpadi ubah apapun, dijamin bisa jalan.
kalau sudah diubah dan gak bsa jalan,..harus dilampirkan/disertakan scriptnya biar tahu letak errornya dimana.
kalau buat presentasi nilai menggunakan 2 form php. form 1 untuk input nilainya ketika di klik submit otomatis ke form 2 untuk menampilkan hasil dari form 1. itu gmna ya?