Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat Form Wajib Angka Dengan jQuery

$
0
0

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

Cara Membuat Form Wajib Angka Dengan jQuery

Kemudian isikan angka

Cara Membuat Form Wajib Angka Dengan jQuery

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.


Viewing all articles
Browse latest Browse all 2170

Trending Articles