Assalamu'alaikum Wr. Wb.

Kali ini saya akan membagikan cara membuat format Mata Uang pada TextBox dan juga Penjumlahan otomatis pada saat data di input atau dalam bahasa inggris/ bahasa mesin disebut OnKeyPress.

Saya sering searching Bagaimana Cara membuat Format Mata Uang di TextBox menggunakan PHP ?, memang saya mendapatkan namun tidak sesuai dengan yang saya inginkan, sehingga saya mempelajri dan memodifikasi sedikit sehingga sesuai dengan kebutuhan saya.

Cara Membuat Format Mata Uang di TextBox menggunakan PHP

Untuk  membuat format mata uang pada textbox, silahkab sobat ikuti langkah-langkah berikut:

  1. Silahkan buka aplikasi editor html kemudian, boleh digunakan Notepade ++, atau Dreamweaver 8, itu terserah sobat. kalau saya menggunakan Dreamveare 8.
  2. Kemudian buat sebuah form dan beri nama "index.php", tampilan formnya adalah sebagai berikut:

    itu untuk tampilan yang saya buat, namun anda bisa menyesuaikan dengan kebutuhan anda.
    atau silahkan copy Script PHP dibawah ini dan letakkan antara <body> .... </body>.

    <div>
    <form class="form-horizontal bordered-0" method="post" target="_self" enctype="multipart/form-data">
    <div style="float:left; width:50%">
    <div >
        <label>Nama Karyawan</label>
        <div class="col-sm-6"><span>
          <input name="nmkaryawan" type="text" class="form-control" id="nmkaryawan" value="<?php echo $row['tplh'];?>" />
        </span></div>
    </div>

    <div >
        <label>Jumlah Gaji </label>
        <div>
            <input name="jmlgaji" type="hidden" class="form-control" id="jmlgaji" value="<?php echo $row['tplh'];?>" onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" >
    <input name="jmlgaji1" type="text" class="form-control" id="jmlgaji1" value="<?php echo $row['tplh'];?>" onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();">
        </div>
    </div>
    <div id="result11">
     
    </div>
    <div >
        <label>Jumlah Pinjam</label>
        <div>
            <input name="jmlpj" type="hidden" class="form-control" id="jmlpj" value="<?php echo $row['tplh'];?>"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" >
     <input name="jmlpj1" type="text" class="form-control" id="jmlpj1" value="<?php echo $row['tplh'];?>"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" disabled="disabled">
        </div>
    </div>
    <div >
        <label style="font-size:15px; color:#0000CC;">Tunjangan Karyawan</label>
        <div class="col-sm-6"></div>
    </div>

    <div >
        <label>Tunjangan Anak</label>
        <div>
            <input name="tunanak" type="hidden" class="form-control" id="tunanak" value="<?php echo $row['tplh'];?>">
     <input name="tunanak1" type="text" class="form-control" id="tunanak1" value="<?php echo $row['tplh'];?>" onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();">
        </div>
    </div>
    <div >
        <label>Tunjangan Prestasi</label>
        <div>
            <input name="tunprestasi" type="hidden" id="tunprestasi" value="<?php echo $row['tglpj'];?>" class="form-control">
     <input name="tunprestasi1" type="text" id="tunprestasi1" value="<?php echo $row['tglpj'];?>" class="form-control"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();"  >
        </div>
    </div>
    <div >
        <label>Tunjangan Hari Raya</label>
        <div>
          <input name="thr" type="hidden" id="thr" value="<?php echo $row['thr'];?>" class="form-control"/>
      <input name="thr1" type="text" id="thr1" value="<?php echo $row['thr'];?>" class="form-control"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" />
        </div>
    </div>
    </div>

    <!-- PINJAMAN -->

    <div style="float:left; width:50%">
    <div >
        <label  style="font-size:15px; color:#990000;">Potongan Gaji</label>
        <div class="col-sm-6"></div>
    </div>
    <div >
        <label>Pinjaman</label>
        <div>
            <input name="potpj" type="hidden" id="potpj" value="<?php echo $row['tglpj'];?>" class="form-control" >
    <input name="potpj1" type="text" id="potpj1" value="<?php echo $row['tglpj'];?>" class="form-control"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" >
        </div>
    </div>
    <div >
        <label>Tidak Hadir</label>
        <div>
            <input name="potth" type="hidden"  id="potth" value="<?php echo $row['tplh'];?>" class="form-control">
    <input name="potth1" type="text"  id="potth1" value="<?php echo $row['tplh'];?>" class="form-control"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" > 
        </div>
    </div>
    <div >
        <label>Lainnya</label>
        <div>
            <input name="potlain" type="hidden" id="potlain" value="<?php echo $row['tglpj'];?>" class="form-control" >
    <input name="potlain1" type="text" id="potlain1" value="<?php echo $row['tglpj'];?>" class="form-control"  onKeyDown="return numbersonly(this, event);" onKeyUp="javascript:tandaPemisahTitik(this);sum();" >
        </div>
    </div>

    <div >
        <label style="font-size:15px; color:#006600;">Total Gaji</label>
        <div class="col-sm-6"></div>
    </div>

    <div >
        <label>Jumlah Total Gaji </label>
        <div>
            <input name="jtotgaji" type="hidden" id="jtotgaji" value="<?php echo $row['tplh'];?>" class="form-control">
    <input name="jtotgaji1" type="text" id="jtotgaji1" value="<?php echo $row['tplh'];?>" class="form-control">
        </div>
    </div>
    <div >
        <label>Tanggal Bayar Gaji </label>
        <div>
            <input name="tglgaji" type="text" id="tglgaji" value="<?php echo $row['tglpj'];?>" class="input-mask form-control" data-inputmask="&apos;mask&apos;:&apos;99/99/9999&apos;" placeholder="Tgl/Bln/Thn" required="required">
    <span id="msgtgl"></span>
        </div>
    </div>
    </div>
    <div >
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-2">
    </div></div>

    <div >
      <label class="col-sm-5 control-label"></label>
        <div class="col-sm-3" align="left" style="margin-top:20px" >
           <input type="submit" name="Simpan" value="Simpan" class="btn btn-primary" onclick="cektgl();"/>
       <input type="button" name="batal" value="Batal" onclick="history.back();" class="btn btn-danger"/>
        </div>
                  </div>
                </form>
            </div>

  3. Masukkan Kode Javascript dibawah ini, untuk keterangannya akan dijelaskan dibawah

  4. <script type="text/javascript" src="my.js"></script>
        <script>
    function sum() {
    function formatNumber(num) {
          return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
    }

        var tunanak = document.getElementById('tunanak1').value;
        var result = tunanak.replace('.','','.');
        var result0 = result.replace('.','','.');
        var result1 = result0.replace('.','','.');   
        var result2 = result1.replace('.','','.');
        document.getElementById('tunanak').value = result2;

       
        var tunprestasi = document.getElementById('tunprestasi1').value;
        var result3 = tunprestasi.replace('.','','.');
        var result4 = result3.replace('.','','.');
        var result5 = result4.replace('.','','.');
        var result6 = result5.replace('.','','.');
        document.getElementById('tunprestasi').value = result6;

        var thr = document.getElementById('thr1').value;
        var result7 = thr.replace('.','','.');
        var result8 = result7.replace('.','','.');
        var result9 = result8.replace('.','','.');
        var result10 = result9.replace('.','','.');
        document.getElementById('thr').value = result10;
       
        var potpj = document.getElementById('potpj1').value;
        var result11 = potpj.replace('.','','.');
        var result12 = result11.replace('.','','.');
        var result13 = result12.replace('.','','.');
        var result14 = result13.replace('.','','.');
        document.getElementById('potpj').value = result14;


        var potth = document.getElementById('potth1').value;
        var result15 = potth.replace('.','','.');
        var result16 = result15.replace('.','','.');
        var result17 = result16.replace('.','','.');
        var result18 = result17.replace('.','','.');
        document.getElementById('potth').value = result18;

        var potlain = document.getElementById('potlain1').value;
        var result19 = potlain.replace('.','','.');
        var result20 = result19.replace('.','','.');
        var result21 = result20.replace('.','','.');
        var result22 = result21.replace('.','','.');
        document.getElementById('potlain').value = result22;

        var jmlgaji = document.getElementById('jmlgaji1').value;
        var result23 = jmlgaji.replace('.','','.');
        var result24 = result23.replace('.','','.');
        var result25 = result24.replace('.','','.');
        var result26 = result25.replace('.','','.');
        document.getElementById('jmlgaji').value = result26;


          var gaji = (document.getElementById('jmlgaji').value * 1) + (document.getElementById('tunanak').value * 1) + (document.getElementById('tunprestasi').value * 1) + (document.getElementById('thr').value * 1);
          var potong = (document.getElementById('potpj').value * 1) + (document.getElementById('potth').value * 1) + (document.getElementById('potlain').value * 1);
         
          document.getElementById('jtotgaji').value = (gaji*1) - (potong*1);
       
        document.getElementById('jtotgaji1').value = formatNumber((gaji*1) - (potong*1));
       
       
    }
    function cektgl() {
        var tgl = document.getElementById('tglgaji').value;
            if(tgl==''){
             document.getElementById('msgtgl').innerHTML ='<div style="font-size:8px; color:red">Tanggal tidak boleh kosong</div>';
            }
            }
    </script>


  5. Buat sebuah file dengan dan simpan dengan nama "my.js", silahkan copy script dibawah
  6. function tandaPemisahTitik(b){
        var _minus = false;
        if (b<0) _minus = true;
        b = b.toString();
        b=b.replace(".","");
       
        c = "";
        panjang = b.length;
        j = 0;
        for (i = panjang; i > 0; i--){
             j = j + 1;
             if (((j % 3) == 1) && (j != 1)){
               c = b.substr(i-1,1) + "." + c;
             } else {
               c = b.substr(i-1,1) + c;
             }
        }
        if (_minus) c = "-" + c ;
        return c;
    }

    function numbersonly(ini, e){
        if (e.keyCode>=49){
            if(e.keyCode<=57){
            a = ini.value.toString().replace(".","");
            b = a.replace(/[^\d]/g,"");
            b = (b=="0")?String.fromCharCode(e.keyCode):b + String.fromCharCode(e.keyCode);
            ini.value = tandaPemisahTitik(b);
            return false;
            }
            else if(e.keyCode<=105){
                if(e.keyCode>=96){
                    //e.keycode = e.keycode - 47;
                    a = ini.value.toString().replace(".","");
                    b = a.replace(/[^\d]/g,"");
                    b = (b=="0")?String.fromCharCode(e.keyCode-48):b + String.fromCharCode(e.keyCode-48);
                    ini.value = tandaPemisahTitik(b);
                    //alert(e.keycode);
                    return false;
                    }
                else {return false;}
            }
            else {
                return false; }
        }else if (e.keyCode==48){
            a = ini.value.replace(".","") + String.fromCharCode(e.keyCode);
            b = a.replace(/[^\d]/g,"");
            if (parseFloat(b)!=0){
                ini.value = tandaPemisahTitik(b);
                return false;
            } else {
                return false;
            }
        }else if (e.keyCode==95){
            a = ini.value.replace(".","") + String.fromCharCode(e.keyCode-48);
            b = a.replace(/[^\d]/g,"");
            if (parseFloat(b)!=0){
                ini.value = tandaPemisahTitik(b);
                return false;
            } else {
                return false;
            }
        }else if (e.keyCode==8 || e.keycode==46){
            a = ini.value.replace(".","");
            b = a.replace(/[^\d]/g,"");
            b = b.substr(0,b.length -1);
            if (tandaPemisahTitik(b)!=""){
                ini.value = tandaPemisahTitik(b);
            } else {
                ini.value = "";
            }
           
            return false;
        } else if (e.keyCode==9){
            return true;
        } else if (e.keyCode==17){
            return true;
        } else {
            //alert (e.keyCode);
            return false;
        }

    }


  7. Sekian Tutorial Kali ini, jika ada yang kurang dipahami, silahkan komentar dibawah...

Jangan lupa di share, agar ilmu tak pernah berhenti mengalir...

Subscribe to receive free email updates:

0 Response to "Langkah Membuat Format Mata Uang dan Penjumlahan Otomatis saat TextBox di Klik"

Post a Comment