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 23 Juni 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 Bagaimana membuat penjumlahan,perkalian, pembagian otomatis di textbox dan Hasilnya langsung muncul pada textbox berikutnya ,

 

Pertanyaan sebelumnya pada artikel saya di http://ebsof.blogspot.co.id/2013/05/membuat-penjumlahan-otomatis.html ,

▼ Download Source Code Dibawah Ini ▼


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 :

 

Cara auto copy value textbox ke textbox lainya
Action Form dengan Select tanpa Tombol Submit

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>

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

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