Penjumlahan otomatis dengan jquery atau operasi matematika di PHP

berikut adalah penjumlahan otomatis di html menggunakan javascript, tuttorial berikut saya improve dengan validasi angka yang di ambil dari blog bang gunawan

note kalau untuk

  1. Perkalian gunakan tanda *
  2.  Pembagian bagi gunakan tanda /
  3. Tambah gunakan tanda +
  4.  Pengurang gunakan tanda –  dan case di bawah ini adalah perkalian jadi sesuaikan saja pada function javascriptnya barisnya :D

berikut contohnya keseluruhan,

  • <html>
    <head>
    </head>
    <body>
    <div id="content">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    function hitung2() {
    var a = $(".a2").val();
    var b = $(".b2").val();
    c = a * b; //a kali b
    $(".c2").val(c);
    }
    function isNumberKey(evt){
     var charCode = (evt.which) ? evt.which : event.keyCode;
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
     return false;
     return true;
    }
    </script>
    
     <table>
     <div id="inputa">
     <p> Harga </p>
     <input type="text" name="harga" id="harga" class="a2" onkeyup="hitung2();" required="" size="40" onkeypress="return isNumberKey(event)" >
     </div>
    
     <div id="inputa">
     <p> Jumlah: </p>
     <input type="text" name="jumlah" id="jumlah" class="b2" onkeyup="hitung2();" required="" size="40" onkeypress="return isNumberKey(event)" >
     </div>
     <div id="inputa">
     <p> Total: </p>
     <input type="text" name="total" id="total" class="c2" readonly size="40">
     </div>
     </div>
     </table>
     <input type="submit" name="submit" id="submit" Value="Submit">
     </form>
    </div>
    </div>
    </body>
    </html>
    

berikut penjelesan javascript nya

  • /*ini includekan*/
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    /*javascipt hitung perhatikan class di form*/
    <script>
    function hitung2() {
    var a = $(".a2").val();
    var b = $(".b2").val();
    c = a * b; //a kali b
    $(".c2").val(c);
    }
    /*buat validasi angka*/
    function isNumberKey(evt){
     var charCode = (evt.which) ? evt.which : event.keyCode;
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
     return false;
     return true;
    }
    </script>
    

mudah-mudahn di mengerti dengan mudah, Happy Coding bro :D

salam tokek belang

Tokek

Tokek Belang

  • Rahmadani hamzah

    terimakasih banyak ya gan. bermanfaat banget. simpel dan mudah di pahami