jQuery counting input value

Sesuai dengan judulnya jQuery counting input value berfungsi untuk menghitung sederet value dari dari inputan text yang ada.

Ide untuk judul jQuery counting input value berawal dari pertanyaan bagaimana cara menghitung total nilai dari beberapa html input text. Secara rincinya ketika di ketik angka dalam masing-masing input text tersebut muncul secara otomatis jumlah totalA dan totalB kemudian terdapat penghitungan selisih antara totalA dan totalB.

Saya menyadari bahwa untuk menjawab dengan panjang lebar dan memberikan kode pada form isian jawaban sangat sulit, oleh karena itu saya coba jawab di sini.

Kode html jQuery counting input value

Oke tanpa basa-basi lagi langsung saja kita lihat kode di bawah ini yang merupakan kode html yang akan kita gunakan sebagai objek penelitian jQuery counting input value :P, jadi kodenya tidak perlu di jelaskan lagi karena sudah cukup jelas.

Kode jQuery untuk counting input value

Sedangkan untuk kode jQuery counting input valuenya sendiri adalah sebagai berikut:

Demo kode ada pada bagian bawah tutorial ini.

Penjelasan Kode Program

Sedikit penjelasan tentang kode jQuerynya:

Kode di atas adalah pendefenisian variable untuk input text yang akan kita hitung (Dari pada tulis panjang-panjang).

$(inpA).bind(‘keyup’,function() berfungsi untuk mendeteksi penekanan keyboard dan mengcapture/mengambil inputan keyboard pada saat tombol selesai ditekan. Nah yang akan kita capture adalah variable inpA yang sudah kita defenisikan sebelumnya.

Saat tombol keyboard selesai ditekan kita buat sebuah variable baru yaitu avalA untuk menghitung total inpA dan bVal untuk mengambil Btotal.

Berguna untuk menghitung tiap-tiap inpA yang sudah didefenisikan sebelumnya, yang dihitung hanya value yang tidak kosong.

Hasil perhitungan akan ditampilkan pada input text Atotal. Kemudian selisihnya dihitung.

Untuk bagian $(inpB).bind(‘keyup’,function() { … dst memiliki kinerja yang sama dengan detail yang sudah saya uraikan sebelumnya.

Berikut ini adalah lengkap sekaligus demo cara menghitung otomatis input text angka:

Selamat menghitung dan memodifikasi ulang tutorial jQuery counting input value ini.

Akhir kata, Happy Coding…… 🙂

Catatan Akhir:

Jika masih ada yang belum dimengerti mengenai tulisan di atas, silahkan tanya di bagian komentar di bawah ya. Supaya mendapat notifikasi jika jawabannya dibalas silahkan centang pilihan "Beri tahu saya komentar baru melalui email" sebelum mengirim komentar.

Catatan Belajar juga hadir di Facebook, dukung tulisan kami dengan klik tombol suka ini ya:

Sekian, semoga tulisan dengan judul jQuery counting input value ini bermanfaat bagi kita semua.

Salam penulis, Ivo Idham Perdameian

58 thoughts on “jQuery counting input value

Add yours

  1. Mas brow.. salam kenal dari sariful.
    mau tanya nich.. kalo misalnya inputannya beda2 (name=”xxxx” tidak sama namanya), seperti program kasir.. bagaimana bentuk script Jquery nya…
    terimakasih sebelum nya.. maaf merepotkan 🙂

  2. masih bingung euy,
    di script jquery nya…
    detailnya saya punya script seperti di bawah… kalo inputan angka 1 sampai angka 12 ada yang di input.. maka otomatis ada di kolom jumlah.. (maaf scrip nya kepanjangan 🙂

      1. kalo inputan angka 1 sampai angka 12 ada yang di input.. maka otomatis hasilnya ada di kolom jumlah.. ?
        bagaimana bentuk script Jquery nya…? (di script itu ada buat “add” baris baru)
        Maaf membingungkan 🙂 maklum baru belajar..

          1. kalo contoh.. jumlah nya gak ikut baris baru…(statik)
            kalo yang punya saya khan dinamic 🙂 . juga di contoh bingung euy.. bagaimana penjumlahannya.. hasilnya jadi aneh..

          2. Terimakasih banyak…. saya juga gi baca2 nich.. buat tambah ilmu.. terutama CI.. tapi bingung OPP PhP aza lum bisa.. dah mo belajar yang lain.. 🙂 hehehe

          3. Beul kang OOP PHP.. hehehe. maaf….
            dan Dora berkata…
            Berhasil..Berhasil..Berhasil.. #sambil loncat kegirangan…
            Terimakasih banyak kang… pertanyaan selanjutnya menyusul.. 🙂 hehehehe

          4. Kang mas… tulung tulung….

            Bisa bantu penjabarannya gak.. di bagian javascript nya?
            bingung euy mengimplementasikan ke script punya saya 🙁

    1. Makanya ikutin contoh punya saya yang di http://jsfiddle.net/idhamperdameian/kPpU9/ trus implementasikan ke permasalahannya bung Sariful.

      Tetapi karena bung Sariful belum juga paham akhirnya saya buat kode baru lagi di http://jsfiddle.net/idhamperdameian/PasKm/ dan mirip alias copy paste dari permasalahan yang bung Sariful hadapi.

      Disitu terdapat bagian yang saya beri tanda Komentar silahkan di hilangkan tanda komentarnya bila ingin menggunakannya.

      1. Betul Kang idham… saya tidak faham… dah coba utak utik…, mungkin karena gak tau maksud dari script ini itu untuk apa.. jadi asal ubah2 aza tanpa ngarti maksudnya….
        saya coba sudah berhasil… Terimakasih mas.. mo coba di pelajari dulu beda nya sama yang sebelumnya dimana.. hehehe
        nanti mo coba bikin penjumlahan otomatis juga buat harga net… semoga berhasil.. jika tidak nanti minta contoh lagi.. 🙂
        maaf selalu merepotkan…

          1. Bang.. mohon bantuannya lagi nich…,
            buatkan contoh script penjumlahan atau pengurangan untuk txt-txt tertentu..
            saya masih bingung bagaimana cara ambil data dari form inputannya…
            ex.
            var a=500;
            var x = 50;
            var y = 10;
            z = a-((a*y/100)+x)

          2. Buat aja attribut id masing-masing input text, atau pke atribut class juga bisa:
            Misal:
            var a=$(‘#id_a’).val();
            var x=$(‘#id_x’).val();
            var y=$(‘#id_y’).val();
            var z = a-((a*y/100)+x);
            alert(z); // console.log(z);

            Contoh html:

  3. Bang Idham, sariful kembali bertanya.. jika menghitung selisih tanggal otomatis? bagaimanakah bentuk script jquery nya.
    var tgl_inv=$(‘#id_a’).val();
    var tgl_byr=$(‘#id_b’).val();
    jika selisih <=90 nanti di 90 jadi over due

    1. Wak kali ini avatarnya kali ini mantaf…. :mrgreen:

      Itu maksudnya selisih hari ya? jika ya bearti itu tergantung format tanggalnya misal formatnya dd-mm-yyyy (mis: 08-04-2013) sehingga jadinya begini:
      var tgl_inv=$(‘#id_a’).val().split(‘-‘);
      tanggal=tgl_inv[0];
      bulan=tgl_inv[1];
      tahun=tgl_inv[2];

      klo formatnya dd/mm/yyyy tinggal ganti aja split(‘/’)

      nah tinggal dikurangi aja, itulah selisihnya. Perlu demonya? nih lngsung ke tkp aja http://jsfiddle.net/7jnnY/

      1. hehehe… itu foto my wife…
        betul bang… maksudnya seperti itu… cuma formatnya ngikutin format mysql yyyy-mm-dd, barusan saya coba koq tidak bisa running ych.. di ganti tanggalnya selalu muncul 08 2013.. kebetulan nich kompi gi error… takutnya karna kompinya…

  4. Bang idham kalau dari contoh yg disini http://jsfiddle.net/PasKm/6/ itukan cma nmbah baris kalau nambah kolom bisa gak ya bang ?
    terus kalau misalnya hasil jumlah tiap baris pengn di simpan ke database bagaimana baca method postnya kan nama input textnya g sama bingung saya …

        1. Wah sorry baru balas sekarang, email sistem web catatanbelajar.com error sehingga balasan pesanmu gak masuk ke email, ini untung aja cek mail sistem jadi tau ada pesan baru.

          Sebentar ya sya coba buatkan.
          Pengen yang seperti gimana? coba ceritakan dulu biar gak terlalu sia-sia buatin contohnya 😉

          1. sebenernya saya pengen bikin nama kolom tabel diambil dri database. nah jika data di databse nambah maka jumlah kolom bertmbah otomatis jdi gak usah buka codingnya lgi. dan kalau misalnya ingin di simpan gimana querynya mas kalau misalnya data yg mau disimpan gak tentu ? contohnya pada kasus addbaris querynya gimana kalau misalny saya inginnya nympan data 2 baris atau 3 baris atau 5 dst? 🙂

          2. Owh kolomnya dari database aja.

            Nah penambahan baris bisa dilihat pada contoh komentar di atas. Nama fielnya pake array misal :

            Nah name=”nama[] itukan array.

            Nanti phpnya gini:

  5. tutorialnya sangat bermanfaat bagi saya, terima kasih atas sharingnya pak
    ada yang mau saya tanyakan, kalau kasusnya sebagai berikut gimana ya pak penyelesaiannya ?

    saya memiliki dua inputbox [tanggal (jquery datepicker) dan umur], ketika inputbox umur saya masukkan value misal : 25 lalu secara otomatis inputbox tanggal (jquery datepicker) langsung menampilkan tanggal lahir (tanggal sekarang – 25) = tanggal lahir

    mohon bantuan kode-nya, terima kasih banyak.

  6. Bang Idham salam kenal saya dehar ada yg mau saya tanyakan saya punya script seperti ini

    pertanyaannya gimna saya bisa medapatkan total jumlah dan jumlah / item supaya bisa dimasukan kedalam databases .. terimakasih

  7. terima kasih mas informasinya,
    sebelumnya saya mau tanya bagaimana cara menjumlahkan row yg statis ?
    Contoh nya saya punya row 1-10 dan kriteria nilainya yg disi harus 100%
    misal row 1 di isi = 10 ,dan 2-seterusnya ..jadi nilai nya di jumlahkan harus 100..
    row ini hasill dari looping sama seperti yg mas buat https://jsfiddle.net/idhamperdameian/GMrrd/embedded/result/
    kalo yg mas buat kan dynamic row .

    sebelumnya terima kasih mas..

    1. Tinggal modifikasi aja mas kode saya itu, tinggal hapus fitur tambahkan baris dan buat validasi jumlah angka tidak boleh dari 100 kalau lebih hapus inputnya seperti input yang saya itu otomatis menghapus klo yang dimasukan bukan angka.

      1. oke mas sudah bisa, thx atas masukan nya.
        cuma saya masih bingung ngasih validasi di #Atotal kalo dia nilainya lebih dari 100 ..
        maklum mas newbie baru belajar Jquery ..

Tinggalkan Balasan

© 2017 oleh Catatan Belajar | Theme: Baskerville 2 by Anders Noren.

Up ↑