Penjumlahan otomatis di Textbox dengan Javascript

Publish Date : 26-10-2023 , dibaca 153468 kali, Hari ini dibaca : 2 kali ,1 comments

Halo teman-teman senterwebs.com , baiklah kali ini kita akan membuat Penjumlahan Otomatis di input textbox dengan javascript..
tentunya bukan hanya penjumlahan saja , namun ada Perkalian,Pembagian,Penjumlahan,Pengurangan yang perinsipnya adalah hal yang sama di program , hanya simbol operator nya saja yang berbeda..Ok.. Kali ini kita akan membahas bagaimana Cara Membuat Penjumlahan Otomatis pada Textbox,

kasus seperti ini pasti banyak didapatkan untuk anda yang sedang membuat aplikasi berbasis web, yang terkadang kita bertanya

Bagaimana membuat penjumlahan,perkalian, pembagian otomatis di textbox..?dan Hasilnya langsung muncul pada textbox berikutnya ,,?Gimana ya,.. caranya klo pas disi belum lengkap hasilnya gak Na tapi 0, Mas gmn caranya penjumlahanya 3 kolom minsal kolom petama x kolom kedua + kolom ketiga,... ???

OY .. Silahkan Baca Juga Ya :

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/membuat-penjumlahan-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();" />=
<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/membuat-penjumlahan-otomatis-di-textbox.html">Read Tutorial Senterwebs.com</a></h1>
<h3>Membuat Penjumlahan Bilangan Desimal <br> Otomatis Senterwebs.com</h3>
<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/membuat-penjumlahan-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();" /> + 
<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 bersama-sama,

Demikian artikel saya kali ini dengan Judul Cara Membuat Penjumlahan otomatis di website, PHP, Javascript, HTML,semoga dapat berguna

Download

Cara auto copy value textbox ke textbox lainya
Previous Post

Membuat Kalkulator Zakat dengan Javascript
Next Post