memberi format titik otomatis pada angka di input form

34 Comments / script php / By

Dalam sebuah form website, kadang kita memerlukan form input field yang berisi angka. Bisa berisi angka yang merupakan jumlah barang ataupun jumlah uang dalam pemisah ribuan. Akan lebih membantu pengunjung dalam memasukan angka apabila dalam field form input tersebut otomatis memberikan titik pemisah dalam ribuan. Misalnya saja pengunjung memasukan angka 9000 maka otomatis angka berubah menjadi 9.000 . Pengunjung tidak dapat memasukan karakter lain selain angka dalam field ini, karena ada validasi yang bekerja otomatis. Dengan demikian, input yang dimasukan akan dipastikan merupakan angka atau numerik.

form bertipe angka dengan validasi otomatis dan pemisah titik

Demo

Untuk membuat field input form bertipe angka dengan validasi otomatis dan pemisah menggunakan titik, kita memerlukan bantuan javascript. Ada contoh penggunaan script ini yang saya ambil scriptnya bersumber dari http://mkhuda.com/teknologi/format-tanda-pemisah-angka-dengan-javascript/ .

Berikut ini penjelasannya.

Anda perlu memasukkan code javascript di bagian head halaman web. Pertama download file js lalu panggil dengan meletakan code di bawah ini di bagian head,

<script type="text/javascript" src="my.js"></script>

sedangkan file my.js berisi code seperti di bawah ini:

function tandaPemisahTitik(b){
var _minus = false;
if (b<0) _minus = true;
b = b.toString();
b=b.replace(".","");
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;
}

}

Untuk selanjutnya, anda membuat form seperti biasa, hanya saja pada field input numerik dimana anda ingin apa yang dimasukan user hanya angka saja dan ada pemisah titiknya, anda perlu memberikan atribut:

id="inputku" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);"

Berikut ini contoh lengkap code html/php

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Format ribuan</title>
<script type="text/javascript" src="my.js"></script>

</head>
<body>
<div id="angka">
<form action='eksekusi.php' method='post'>
<div id="input">
<center><h1>Format Input Javascript</h1></center>
Jumlah 1 :<input type="text" id="inputku" name="angkaa" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);"><br/>
Jumlah 2 :<input type="text" id="inputku" name="angkab" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);"><br/>
<button type='Submit'>Submit</button>
</form>
</div>
</div>
</body>
</html>

Pada contoh di atas, saya membuat form dengan 2 input numerik. Tampilan formnya seperti di bawah ini:

form angka ribuan

Dengan penjelasan di atas, dan contoh yang disertakan, anda dapat membuat kreasi form sesuai kebutuhan anda

    1. bayu

      tujuannya itu untuk apa ya? tanda – (minus) . untuk mengurangi? .. sebenarnya dapat disiasati dengan query pengurangan. jadi postingnya angka biasa, namun hasil inputannya tersbut nanti diubah menjadi minus.
      jika menggunakan contoh form saya, maka saya merubahnya di file eksekusi. jadi kira2 seperti ini:


      //menangkap input angka dgn titik ribuan, dari form input: angkaa
      $angkaa= $_POST['angkaa'] ;

      //menghilangkan titik ribuan
      $angka1= str_replace(".", "", $angkaa);

      //memberi minus pada hasil input
      $angkaminus = str_replace("", "", -$angka1);


      jadi yang dimasukan ke query insert atau query lainnya ke dalam tabel, adalah $angkaminus , yang nanti sudah minus misalnya dari angka 1.000 hasilnya nanti -1000

      Reply
  2. alfa204

    untuk rungsi numerik negativ gan, jadi form tersebut jika diinputkan ex: -1.000 maka akan mengurangi data jika kolom disum seperti hutang gan,.

    Reply
    1. bayu

      itu sudah saya kasih contoh scriptnya, di jawaban saya di atas… dengan contoh script di atas, user tidak perlu memasukan tanda – (minus) di form input (karena kita tidak bisa berharap user memasukan tanda – , palingan lupa atau tidak tahu)…., tapi pada proses eksekusi post, akan ditambahkan tanda – (minus) secara otomatis…

      Reply
  5. Afrian Safitri

    Ane nemu kelemahannya waktu ane coba di demo hasilnya memang bagu sgan tapi abis ane input data data hanya bisa dihapus dengan backspase tidak bisa di delete dan pindah piindah angka gan ada solusi ga kalo ada email yah ke ane gan soalnya sangat berguna nih ilmu dari agan 🙂 Terimakasih

    Reply
  6. Deky Alexander

    Gan, mau tanya
    Klo misalkan format input titik lebih dari 2 text field bisa ga?
    Soal nya yang saya buat textfield nya lebih dari dua trus gimana cara nya biar bisa nongol semua format titik nya di textfield yang udah di buat?

    Reply
    1. bayu

      jelas bisa banget lah.
      tinggal di copas aja code input nya, dan buat sebanyak yang diperlukan
      dan ganti nama aja pake nama yang berbeda beda. ( name=”…”)

      < input type=”text” id=”inputku” name=”…” onkeydown=”return numbersonly(this, event);” onkeyup=”javascript:tandaPemisahTitik(this);” >

      Reply
      1. herozdev

        nilai dari id nya diambil dari mana? apa emang harus “inputku” atau bisa diubah. soalnya pas saya coba malah ngehang gak mau jalan form nya pas diketik angka

        Reply
  7. Ridwan

    ane mw tanya gan,
    pas input di textfield gk ada masalah,
    tp pas datanya diinput ke database, yang terbaca hanya 5 digit.
    misal angka yang diinput 12.000.000, yang terbaca di database 12.000
    padahal udh diset bigint.
    kira2 kenapa ya gan ?

    Reply
    1. bayu

      Hi, Ridwan
      dugaan saya, Length kolom table agan cuma 5 , coba cek .. kalau bener cuma 5, ganti ke yang lebih banyak, misal 10.

      Reply
    1. bayu

      pada file my.js , dimodifikasi gan. tanda . diganti ,

      atau replace bagian: function tandaPemisahTitik dengan script ini

      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;
      }

      Reply
  9. vika

    master sebelumnya saya ingin mengucapkan terimakasih karena sangat membantu saya dalam mengerjakan tugas kuliah ><
    master saya ingin bertanya, programnya ini berjalan dengan baik tapi kenapa ketika saya memasukkan uang 7000 yang masuk ke database hanya 7
    keetika saya memasukkan 50000 yang masuk ke database hanya 50.
    tipedata saya adalah int, dan panjangnya 11.
    Maaf master kalau pertanyaannya receh, saya masih baru dalam coding.. terimakasih

    Reply
    1. bayu

      Hi vika,
      saya bukan master T-T

      seharusnya, saat eksekusi setelah submit, tanda titiknya dihilangkan dulu, karena titik di situ dianggap sebagai desimal, sehingga angka 0 di belakang titik dianggap tidak ada saat diinsert ke kolom tabel, tentu saja akan menghasilkan nilai yang berbeda.

      untuk menghilangkan titiknya pada saat eksekusi, sebenarnya dapat dilihat dengan contoh script yang saya tulis di komentar di atas, yaitu dengan mengggunakan fungsi str_replace

      jadi contohnya begini
      misalnya nama teks inputnya: angka

      maka di script eksekusi seteah tombol submit, seperti ini:

      //menangkap input angka dgn titik ribuan, dari form input: angka
      $angka= $_POST[‘angka’] ;

      //menghilangkan titik ribuan
      $nilai= str_replace(“.”, “”, $angka);

      // query insert ke table
      $query_insert = “INSERT INTO table (kolom) VALUES (‘$nilai’)”;

      …dan seterusnya

      Reply
      1. vika

        maaf baru menanggapi karena baru saja mengerjakan programnya lagi…
        masih sama itu master hasilnya di database. apakah ada perbedaan perintah ya master kalau saya menggunakan mysqli?

        Reply
        1. vika

          maaf ternyata bisa, tadi kesalahan saya saja karena kurang fokus.
          terimakasih master atas bantuannya. semoga amal baiknya dibalas sama yang di atas.

          Reply
  12. hakim

    gan, punyaku cuman mentok sampe 100.000, kalo saya tambahin satu angka lagi jadi kosong atau reset, gimana tuh gan?

    Reply
  13. Nur Widiasto

    nice post gan!

    mau tanya, kalo saya ingin inputannya ada nilai awal, bagaimana caranya agar nilai awal tersebut juga ikut terformat gan?
    saya udah coba tapi belum berhasil.. nilai awalnya muncul tapi tidak terformat..
    maklum nubie belajar php otodidak gan, hehehe 😀

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.