Menambah bilangan secara otomatis dengan event onKeyup() Javascript

Membuat alat hitung dengan form PHP mungkin sudah banyak kita jumpai, tapi apa ya kekurangannya.....?
Biasanya jika kita melakukan perhitungan dengan PHP, maka kita harus memasukan bilangan dan menekan tombol submit. Bagaimana kalo kita ingin menghitung ulang bilangan yang lain. Tentu akan sangat merepotkan jika kita harus menekan tombol submit atau enter terus menerus.

Nah pada tutorial kali ini kita akan membuat alat hitung otomatis tanpa penekanan tombol submit,  tepatnya dengan menggunakan event onKeyup() javascript.

Algoritma Program :
1. Buatlah form html berupa 3 form text  dan 1 form botton
2. Buat function javascript berupa variable untuk menyimpan value bil A , value Bil B dan value Bil C atau hasil
3. Ambil value Bil A, Bil B, dan Bil C=Bil A+ Bil B dengan menggunakan document.getElementById("id")
4. Dengan event onKeyup() panggil nama function javascript yang tadi kita buat


Source Code Program :
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Menambah bilangan secara otomatis</title>
    </head>
    <body>
        <script type="text/javascript">
            function tambah(){
                //nilai pertamaa
                var nilai1=document.getElementById("val1").value;
                //nilai kedua
                var nilai2=document.getElementById("val2").value;
                //operasi tambah
                var tambah=parseInt(nilai1)+parseInt(nilai2);
                //menampilkan hasil tambah
                document.getElementById("hasil").value=parseInt(tambah);
            }
            function refresh(){
                //mengosongkan form
                document.getElementById("val1").value="";
                document.getElementById("val2").value="";
                document.getElementById("hasil").value="";
            }
        </script>
        <h2>Program Menambah Bilangan Secara Otomatis</h2>
        <input type="text"name="n1"id="val1" onkeyup="tambah()" maxlength="15"> +
        <input type="text"name="n2"id="val2" onkeyup="tambah()"maxlength="15">
        =<input type="text"id="hasil">
        <input type="button" value="Clear"onclick="refresh()">
    </body>
</html>

Ketik kode program diatas dengan editor kesayangan anda, dan simpan dengan nama tambah_otomatis.html
selanjutnya run ke browser......

Selamat mencoba....:-)) 


Download Source Code               Online Demo







Salam Penulis


Fuad Indra Setiawan




0 comments:

Posting Komentar