Auto Calculate of Input Fields Using Javascript

Halo Sobat bacaanringan.id. Bagaimana kabar anda semua? Kami berharap kabar anda semua para pembaca, baik-baik saja, sehat dan selalu semangat dalam melakukan aktifitas sehari-hari.

Auto Calculate of Input Fields Using Javascript

Nah sobat, berkaitan dengan masalah programming, kali ini saya akan berbagi sesuatu hal yang ringan dan mudah dipahami seputar pemrograman javascript.

Auto Calculate of Input Fields Using Javascript

Yap, judul yang saya pilih adalah Auto Calculate of Input Fields Using Javascript. Atau terjemah bebasnya adalah Cara melakukan kalkulasi otomatis pada sebuah form menggunakan Javascript.

Dengan judul diatas, ada dua hal yang menjadi kode utama, yakni HTML dan Javascript,

  1. HTML untuk penulisan form nya
  2. Javascript untuk penulisan fungsi kalkulasi otomatis nya.

Penjelasan Singkat

Jadi, dalam artikel ini, saya akan berbagi tentang bagaimana cara melakukan kalkulasi otomatis dalam sebuah form yang berisikan beberapa field atau textfield, menggunakan pure javascript. Dengan begitu, user tidak perlu melakukan kalkulasi secara manual, baik itu dengan menekan tombol tertentu atau menjumlah secara terpisah menggunakan alat bantu lainnya, seperti kalkulator, lalu kemudian menuliskan angka totalnya pada textfield total.

Dan sesuai penjelasan saya sebelumnya, ada dua hal yang harus disiapkan, yaitu HTML dan Javascript. Dan langsung saja, berikut ini adalah kode yang telah kami siapkan.

HTML

Sebagaimana yang terlihat diatas, saya memberikan contoh dengen menuliskan kode textfield sebanyak lima biji. Nah dari kelima textfield  tersebut, semuanya saya beri nama dengan “price[]“. Ada tanda kurung siku disitu menandakan bahwa variabel “price” tersebut bertipe array. Ini untuk memudahkan saja dalam proses lebih lanjut. Misalnya untuk proses pengambilan nilainya dan kemudian disimpan ke database.

Kemudian, yang lebih penting lagi adalah adanya function onkeyup” dalam setiap textfield yang ada. Fungsi dari onkeyup adalah menangkap semua pergerakan keyboard yang kita ketikkan ke dalam textfield. Dengan function inilah kalkulasi secara otomatis bisa dilakukan dengan mudah.

Jadi, dalam setiap pergerakan keyboard dalam kelima textfield diatas, sistem akan “memanggil” functionaddInputs()“, yang mana addInputs() ini berisi semacam perintah untuk menjumlahkan semua angka yang ada dalam textfield yang ada.

Javascript

Silakan sobat sekalian coba menuliskan kode diatas dalam mesin lokal masing-masing. Kemudian menjalankannya atau mengaksesnya melalui browser kesayangan sobat sekalian.

Dan berikut ini saya bagikan source code secara penuh yang bisa sobat copy-paste secara langsung,

Berikut ini saya lampirkan bagaimana penampakan dari hasil akhir kode program yang saya telah buat diatas,

Hasil Akhir Auto Sum Form

Demikian sobat bacaanringan.id, apa yang bisa kami bagi. Ringan banget kan? 🙂

Semoga harimu menyenangkan sobat!

Dan jangan lupa, like, comment dan share artikel ini jika memang bermanfaat.


Sumber gambar: https://www.sourcecodester.com/node/9693

Comments

comments