Sumber : https://senterwebs.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html
Membuat Penjumlahan otomatis di Textbox Ok teman-teman, sahabat setia senterwebs.com .. Dalam kasus ini kita akan membuat penjumlahan atau jumlah total otomatis setelah kita menginput data , tanpa perlu menekan tombol submit. Untuk proses seperti ini kita akan membuat dengan menggunakan Javascript , Kenapa dengan Java script ? karena program javascript berjalan disisi client , artinya program akan di eksekusi di browser anda, Tidak di server, sehingga prosesnya akan lebih cepat dan bisa langsung di ekseskusi. Berikut contoh Penjumlahan Otomatis dengan Javascript :
Code HTML : <!DOCTYPE html><html> <head> <meta charset='UTF-8'> <meta name="author" content="Senterwebs"> <title>Membuat Penjumlahan Otomatis Senterwebs.com</title> <link rel="shortcut icon" href="https://senterwebs.com/favicon.png"> <link rel="icon" href="https://senterwebs.com/favicon.png"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="wrapper"> <h1 align="center"><a href="https://senterwebs.com/artikel-131/membuatpenjumlahan-otomatis-di-textbox.html">Read Tutorial Senterwebs.com</a></h1> <h3>Membuat Penjumlahan Otomatis Senterwebs.com</h3> <input type="text" id="txt1" onkeyup="sum();" /> <input type="text" id="txt2" onkeyup="sum();" />=
Sumber : https://senterwebs.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html
<input type="text" id="txt3" /> <script> function sum() { var txtFirstNumberValue = document.getElementById('txt1').value; var txtSecondNumberValue = document.getElementById('txt2').value; var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); if (!isNaN(result)) { document.getElementById('txt3').value = result; } } </script> <div class="cc"> <div class="ac"> <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com% senterwebs&width=100px&layout=button_count&action=like&show_faces=false&share =false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> </div> </div> </div> </body> </html>
Demo1 Penjumlahan Bilangan Desimal Bagi yang ingin mencoba cara menjumlahkan bilangan desmial di website , anda bisa gunakan contoh berikut ini , dimana kita hanya mengubah kode javascript dari bilangan integer , ke Float , ya dengan menggunakan ParseFloat
Code HTML : <h1 align="center"><a href="https://Senterwebs.com/artikel-131/membuatpenjumlahan-otomatis-di-textbox.html">Read Tutorial Senterwebs.com</a></h1> <h3>Membuat Penjumlahan Bilangan Desimal <br> Otomatis Senterwebs.com</h3>
Sumber : https://senterwebs.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html
<input type="text" id="txt1" onkeyup="sum();" /> <input type="text" id="txt2" onkeyup="sum();" />= <input type="text" id="txt3" /> <script> function sum() { var txtFirstNumberValue = document.getElementById('txt1').value; var txtSecondNumberValue = document.getElementById('txt2').value; var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue); if (!isNaN(result)) { document.getElementById('txt3').value = result; } } </script>
Demo2 Penjumlahan dan Pengurangan Sekaligus Ada yang menanyakan jika textbox nya 3 , nah disini suckittrees membuat penjumlahan pengurangan serta pengambungan ke bilangan desimal.. silahkan disimak dan dijalankan file demo nya
Demo3 Code HTML : <h1 align="center"><a href="https://senterwebs.com/artikel-131/membuatpenjumlahan-otomatis-di-textbox.html">Read Tutorial Senterwebs.com</a></h1> <h3>Membuat Penjumlahan dan Pengurangan <br> Otomatis Senterwebs.com</h3> <input type="text" id="txt1" onkeyup="sum();" /> +
Sumber : https://senterwebs.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html
<input type="text" id="txt2" onkeyup="sum();" /> <input type="text" id="txt3" onkeyup="sum();" /> <br><br> <h3>Hasilnya adalah</h3> <input type="text" id="txt4" /> <script> function sum() { var txtFirstNumberValue = document.getElementById('txt1').value; var txtSecondNumberValue = document.getElementById('txt2').value; var txtTigaNumberValue = document.getElementById('txt3').value; var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) - parseFloat(txtTigaNumberValue); if (!isNaN(result)) { document.getElementById('txt4').value = result; } } </script>
Script diatas sudah diuji dan hasilnya sudah 100% Work , dapat mengatasi masalah agar saat mengisi penjumlahan tida tampil Na pada textbox selanjutnya,,Untuk anda yang ingin membuat dengan Jquery simak artikel Penjumlahan Otomatis textbox dengan Jquery Nah,, Bagaimana Cara Penjumlahan 3 kolom atau textbox secara otomatis ???? Jika ada yang masih belum mengerti , silahkan borkomentar ,,,,, dan Mari kita diskusi bersamasama, Demikian artikel saya kali ini dengan Judul Cara Membuat Penjumlahan otomatis di website, PHP, Javascript, HTML,semoga dapat berguna