contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Penjumlahan otomatis di Textbox

Posted in Javascript Jquery Life at 25 Desember 2017 With 1 Comments

Perkalian,Pembagian,Penjumlahan,Pengurangan 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

▼ Download Source Code Dibawah Ini ▼


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 :
 
  1. Cara auto copy value textbox ke textbox lainya
  2. Action Form dengan Select tanpa Tombol Submit
  3. Menjumlahkan record / field numerik di database MYSQL
 

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 :

Membuat Penjumlahan otomtis di textbox

 

Code HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
  <meta name="author" content="Suckittrees">
  <title>Horizontal Dropdown Menu dengan CSS3 Suckittrees.com</title>
  <link rel="shortcut icon" href="http://suckittrees.com/favicon.png">
  <link rel="icon" href="http://suckittrees.com/favicon.png">
 </head>
<body>
<h1 align="center"><a href="suckittrees.com/artikel-121/membuat-menu-dropdown-dengan-css.html">Read Tutorial Suckittrees.com</a></h1>
<h3>Membuat Penjumlahan Otomatis Suckittrees.com</h3>
<input type="text" id="txt1"  onkeyup="sum();" />
<input type="text" id="txt2"  onkeyup="sum();" />=
<input type="text" id="txt3" />
</body>
</html>

Untuk Menangani Penjumlahan diatas kita membuat fungsi Javascript, Berikut Codenya, letakkan pada bagian bawah diatas tag </body>

<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>

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

penjumlahan desimal otomatis di textbox

<h1 align="center"><a href="http://suckittrees.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html">Read Tutorial Suckittrees.com</a></h1>
<h3>Membuat Penjumlahan Bilangan Desimal <br> Otomatis Suckittrees.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

membuat penjumlahan otomatis dengna javascript

Demo3

<h1 align="center"><a href="http://suckittrees.com/artikel-131/membuat-penjumlahan-otomatis-di-textbox.html">Read Tutorial Suckittrees.com</a></h1>
<h3>Membuat Penjumlahan Bilangan Desimal <br> Otomatis Suckittrees.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

Artikel Rekomendasi



Artikel Terkait

Diskusi

1 Komentar


Tedi   Pada : 2016-08-27 22:45:57
makasih gan .. sangat membantu , tapi jika kasusnya begini : text1 + text 2 + text 3 = text4 * text5 = text6 makasih sebelumnya...