Input Data Berupa angka pada textbox Menggunakan Jquery

Sering kita menemukan diwebsite ada sebuah form contact us atau form lainya harus di isi data dengan berupa angka ,misalnya jumlah barang dalam kasus toko online. Apabila data yang diisikan bukan berupa angka,maka akan mengakibatkan terjadinya eror,karena tidak bias melakukan perhitungan sub total dan total harga barang tsb.
Dengan Jquery , kita bisa bikin sebuah input yang hanya boleh di isi angka dan apabila ada yang coba coba ngisi datanya bukan berupa angka,maka akan tampil peringatan di sebelah text kanan textbox tersebut.untuk lebih jelas lihat skrip berikut

PERHATIKAN JENIS HURUF YANG DI BOLD.

 

<html>
  <head>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        // ketika input usia di isi, eksekusi bagian ini.
          $("#umur").keypress(function (data) 
          {
             // kalau data bukan berupa angka, tampilkan pesan error
             if(data.which!=8 && data.which!=0 && (data.which<48 || data.which>57))
             {
                  $("#pesan").html("Isikan Angka").show().fadeOut("slow");
                return false;
           }   
          });

      });
    </script>
  </head>
  <body>
    <div class="demo" style="width: 250px;">
    <form>
      <p>Nama : <input type="text" id="nama"> </p>
      <p>Umur : <input type="text" id="umur" size="3">
                <span id="pesan"></span> </p>
    </form>
    </div>
  </body>
</html>

 

Download file

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id