Pada pembuatan suatu halaman website baik menggunakan .html maupun .php terdapat beragam jenis type penginputan data, contoh yaitu: teks, number, select, dan lain-lain. Namun bagaimana jika yang kita inginkan melakukan penginputan data hanya angka..?
Nah.. pada kesempatan kali ini saya akan memberikan Inspirasi Source Code tentang bagaimana cara input hanya angka pada php dan mysql.
Lihat juga: Cara Merubah Nominal Angka Menjadi Terbilang Pada PHP
Ada banyak item input yang dilakukan hanya dengan angka, contoh: Nomor handpone, Nomor Induk KTP, Nominal Jumlah Uang dan lain-lain.
Pada tutorial kali ini saya hanya memberikan contoh singkat yaitu penginputan item Nomor Handpone dan selanjutnya kalian bisa kembangkan sesuai dengan kebutuhan form pembuatan web yang kalian kerjakan.
Langsung aja saya eksekusi langkah-langkahnya yaitu seperti berikut:
- Siapkan terlebih dahulu database dan tabel database untuk penyimpanan file.
- Siapkan satu file php untuk form proses input, contoh : input_angka.php
- Ketikan source code pada form Anda seperti berikut:
<h3>Input Hanya Angka Pakai Javascript</h3>
<form action="" method="post">
<input type="text" name="no_telepon" onkeypress="return inputAngka(event)"/>
<button type="submit" name="simpan">Simpan</button>
</form>
//Script Proses penyimpanan data
<?php
mysql_connect("localhost","root","") or die("Koneksi Gagal..!"); mysql_select_db("nama_database") or die("Database Tidak Terdeteksi..!");
if(isset($_POST['simpan'])){
$no_telepon=$_POST['no_telepon'];
$angka=mysql_query("insert into nama_tabel (id,no_telepon)values('','$no_telepon')");
if ($angka){
echo 'Data Berhasil Di Simpan.!';
}
}
?>
<script>
function inputAngka(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
Keterangan**:
- Pada item penginputan Nomor Handpone tambahkan script onkeypress="return inputAngka(event)" seperti pada tulisan yang berwarna merah diatas.
- Kode javascrips pada tulisan yang berlatar belakang merah merupakan script yang akan mengeksekusi item penginputan angka pada form.
Kesimpulan:
Dengan adanya kedua script yang berwarna merah dan berlatar belakang merah tersebut maka penginputan data hanya angka dapat dilakukan.
Selamat mencoba dan semoga tutorial singkat yang dapat saya bagikan dapat bermanfaat…..!
Apabila ada source code yang tidak berjalan, error atau tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.
Post a Comment