Dalam sebuah website biasanya kita sering menemukan sebuah form. Form tersebut digunakan untuk mengumpulkan data dari pengunjung terkait dengan konten website kita. Bisa untuk survey dari mana pengunjungnya, ataupun untuk sekedar bertanya tentang konten yang kita buat. Jadi peran form ini sangat penting untuk pengembangan website kita. Saat mengisi form sering kali user salah menginputkan data atau lupa satu kolom belum terisi. Sebagai pembuat website tentunya kita bisa memperingatinya melalui sistem. Sesuai dengan pembahasan kita kali ini, kita akan membuat pop up peringatan dengan Jquery.
Pop up ini akan muncul ketika salah satu textbox yang kita buat belum terisi, ataupun jumlah karakternya kurang dan sebagainya. Semua itu bisa kalian kreasikan sesuai dengan kebutuhan masing-masing. Pada artikel kali ini, kita akan membuat contoh kasus untuk memperingatkan user apabila tidak mengisi salah satu textbox. Maka akan muncul peringatan langsung saat menekan suatu tombol. Untuk lebih jelasnya kalian bisa ikuti contoh code berikut ini untuk mempersingkat waktu ya.
form.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("#teks").val();
if(x.length<1){
alert("teks kosong !");
}
else{
alert(x);
}
});
});
</script>
</head>
<body>
<p>Nama: <input type="text" name="user" id="teks"></p>
<button>Cek</button>
</body>
</html>
Setelah sudah kalian bisa simpan file tersebut dengan format HTML. Untuk melihat hasilnya kalian bisa langsung membuka file tersebut melalui browser kalian. Jika berhasil maka tampilanya akan seperti ini.
Kalian coba isikan data apa saja kemudian tekan tombol dibawahnya, maka yang terjadi adalah seperti ini.
Sekarang coba kembali, namun tidak perlu mengisi textboxt dan langsung menekan tombolnya. Maka yang terjadi adalah seperti ini.
Dengan begitu kalian bisa kembangkan lagi untuk jenis peringatan lainya sesuai kebutuhan. Mudah bukan ?
Sekian pembahasan mengenai bagaimana cara membuat pop up peringatan dengan Jquery. Semoga artikel kali ini bermanfaat dan dapat membantu kalian dalam proses belajar mengenai pemrograman web. Sampai jumpa pada artikel selanjutnya yang tidak kalah menarik dan seru hanya di Dumet School.
