Skip to main content

Penjumlahan Inputbox Secara Otomatis Di HTML, Php, Dan JQuery

Hai sobat yadishare apa kabar? Sudah hari sabtu lagi nih. Iseng-iseng ah pengen nulis mengenai html dan jquery. Ketika kita membangun sebuah aplikasi menggunakan php, seringkali kita harus membuat sebuah penjumlahan antar textbox secara otomatis agar memudahkan user.

Misalnya kita memiliki 3 buah inputbox yang kita buat dengan menggunakan HTML yang terdiri dari sub total, ppn, dan grand total. Kemudian setiap kali kita menginputkan angka ke dalam textbox sub total dan textbox ppn tersebut, kita ingin textbox grand total jumlahnya terhitung secara otomatis agar dapat memudahkan user. Lalu bagaimana caranya?



Nah untuk dapat melakukannya, kita pasti butuh cara yang mudah dan cepat bukan? Ada banyak cara yang dapat kita lakukan untuk mewujudkan hal tersebut. Salah satunya adalah dengan menggunakan bantuan JQuery.

Pertama kalian bisa download file jquery.js disini. Masukkan ke dalam folder assets/js. Kalian juga dapat menambahkan script berikut ini tanpa harus mendownload file diatas jika memang PC/Laptop anda terhubung ke dalam internet.

[code language="html"] https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js [/code]
Jangan lupa juga untuk mendownload css bootstrap agar tampilan halaman web kita menjadi sedikit lebih menarik ya. Kemudian ketikkan full script html berikut ini ke dalam file index.php dan simpan ke dalam folder textbox-jquery yang anda buat di dalam folder www jika anda menggunakan wamp server atau htdoc jika anda menggunakan xampp :

[code language="html"] Penjumlahan Textbox Secara Otomatis Di HTML, PHP, Dan JQuery
Sub Total
PPn
Grand Total
 $("#volume").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });

 $("#harga").keyup(function(){
   var a = parseInt($("#volume").val());
   var b = parseInt($("#harga").val());
   var c = a+b;
   $("#jumlah").val(c);
 });

[/code]







Berikut tampilan dari hasil kalkulasi textbox di atas setelah di jalankan dari web browser:



Ini adalah script dari jquery di atas yang digunakan untuk menghitung textbox secara otomatis menggunakan event/function keyup :

[code language="html"] $("#volume").keyup(function(){ var a = parseInt($("#volume").val()); var b = parseInt($("#harga").val()); var c = a+b; $("#jumlah").val(c); }); $("#harga").keyup(function(){ var a = parseInt($("#volume").val()); var b = parseInt($("#harga").val()); var c = a+b; $("#jumlah").val(c); }); [/code]

Ok guys, thanks for reading my article today, I hope this short explanation can help you. Wanna see the video ? Check it below. Thanks for watching, don't forget to like, share and subscribe. It's free. Find the download link of this source code in the description of below video :)









Labels:

Comments

Post a Comment

Popular posts from this blog

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...
Post a Comment
Read more

Tutorial Pentaho 7 (Mulai Dari Proses Install Sampai Dengan Koneksi Database)

Halo sob, pernah mendengar pentaho ? Ya tahun lalu saya sempat mencoba-coba dan ingin mencari tahu tentang kegunaan dan kelebihan dari pentaho. Akhir november tahun 2016 kemarin, Pentaho 7 versi community edition resmi diluncurkan. Beberapa bulan sebelumnya saya sempat mencoba versi 4 atau 5 namun hanya sebentar dan kalau tidak salah pun boleh di bilang gagal. Lalu saya coba lagi versi release terbaru dari pentaho 7 community edition tersebut dan alhamdulillah berhasil. Namun saat ini saya sudah tidak bisa lagi memberikan tutorialnya melalui tulisan saya karena jujur saja saya pun sudah lupa saat ini. Harus menonton video-video tutorial saya dulu mengenai Pentaho yang sudah pernah saya upload ke youtube waktu itu. Itulah salah satu gunanya memiliki video tutorial sendiri yang bisa kita tonton sewaktu-waktu apabila kita lupa di lain waktu. Bener ngga sob. Meskipun banyak juga video-video lain yang bisa kita temukan di youtube. Terima kasih juga untuk google yang sudah mengakuisisi youtu...
6 comments
Read more

Cara Menghilangkan Status Read Message Pada Aplikasi WhatsApp (Tips WhatsApp Terbaru)

Hai sobat yadishare, apa kabar ? Apakah kalian termasuk pengguna aplikasi whatsapp ?   Menurut saya sih sudah pasti ya. Karena kalau tidak rasanya kalian tidak akan membaca artikel saya ini bukan... Mayoritas para pengguna smartphone android biasanya menggunakan aplikasi whatsapp untuk chatting dan bertukar informasi melalui group. Istilah kerennya bersosmed atau bersosial media. Tapi jangan kebablasan ya. Gunakanlah seperlunya. Jangan hanya karena takut dibilang ngga gaul terus kita tidak bisa memfilternya. Saat ini whatsapp boleh dibilang sudah dapat menggeser atau menggantikan peran blackberry messenger yang pernah sangat booming dan pernah tidak tergantikan saat itu. Well, memang tidak akan pernah ada yang abadi di dunia ini. Semua pasti tergantikan. Cepat atau lambat akan selalu ada teknologi baru yang dapat menggantikan teknologi lama.   https://www.youtube.com/watch?v=Nn2BKaiDzVg&t=61s   https://www.youtube.com/watch?v=r6Voq8Jk2Ag   Nah tipsnya kali ini ad...
6 comments
Read more