Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Form Wajib Angka Dengan jQuery. Dimana pada artikel sebelumnya saya juga sudah membahas from validasi wajib angka dengan javascript, namun pada artikel kali ini sedikit berbeda form input wajib angka hanya bisa diisi dengan angka tetapi jika di masukkan huruf maka pada tampilan form value tetap kosong begitupun sebaliknya jika di isi angka akan muncul pada value form. Dalam hal ini saya akan menggunakan fungsi keypress() dan event.which jika diisikan huruf akan dikembalikan nilai nya menjadi false
Baik langsung saja kita implementasikan Cara Membuat Form Wajib Angka Dengan jQuery pertama – tama siapkan text editornya dan library jQuery nya. Kemudian buat file html nya terlebih dahulu untuk membuat tampilan form
<!DOCTYPE html> <html> <head> <title><strong>Cara Membuat Form Wajib Angka Dengan jQuery</strong></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="form-group"> <label>Form Input</label> <input type="text" name="" id="total" class="form-control"> </div> </div> </div> </body> </html>
Saya menggunakan bootstap 4 untuk layoutnya, untuk contoh saya buat satu form saja. Oke lalu save dengan index.html, selanjutnya load library jQuery nya
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Dan masukkan script jQuery nya di bawah ini
$(function(){ $("input").keypress(function(e) { if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; } }); })
Jika sudah save dan jalankan pada browsernya, maka output seperti gambar di bawah ini
Kemudian isikan angka
Kemudian masukkan huruf apa saja, dengan begitu pada value form tidak akan di tampilkan seolah – olah keyboard tidak berfungsi
Nah, gimana..?? Cukup mudah bukan..??
Sekian pada artikel kali ini tentang Cara Membuat Form Wajib Angka Dengan jQuery kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.
The post Cara Membuat Form Wajib Angka Dengan jQuery appeared first on Kursus Website Terbaik.