Judul : Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery
link : Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery
Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery
Assalmualaikum Warahmatullahi WabarakatuBismillahirrahmanirrahiim
Alert adalah notifikasi javascript yang sering kita gunakan dalam memvalidasi suatu script atau kode yang kita jalankan, alert default javascript adalah seperti code dibawah ini
<script>window.alert('Selamat datang');</script>
Hasilnya seperti gambar dibawah ini
Disini saya akan membahas bagaimana caranya untuk membuat alert dengan sweet alert agar mendapatkan tampilan seperti gambar dibawah ini :
Oke sobat langsung saja …..
Langkah pertama
Langkah kedua
Extract hasil download ke folder root server local sobat, kalau saya di c:\xampp\htdocs\php7\sweetalert, sesuaikan dengan folder root server local sobat.
Langkah ketiga
Ketiklah kode sweet alert dibawah ini
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aguzrybudy.com | Sweet Alert</title>
<link rel="stylesheet" href="alert/css/sweetalert.css">
</head>
<body >
<form method="post" id="email">
<p>
<input name="email" placeholder="Enter Your Email" type="text" id="inputemail">
<input type="submit" value="Submit" ></p>
</form>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="alert/js/sweetalert.min.js"></script>
<script src="alert/js/qunit-1.18.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#email').on('submit',function(e) {
$.ajax({
url:'subscribe_act.php', //nama action script php sobat
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
swal("Success!", "Message sent!", "success");
},
error:function(data){
swal("Oops...", "Something went wrong :(", "error");
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
Hasil eksekusi script diatas adalah seperti gambar dibawah ini .
sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file PDF -NYA download disini dan jika sobat ingin code dari aplikasi diatas download disini.
Demikianlah Artikel Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery
Sekianlah artikel Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery dengan alamat link https://ebookeverywhere.blogspot.com/2016/04/cara-membuat-alert-indah-dengan-sweet.html
password nya gan
BalasHapusinfonya sangat bermanfaat bagi ane
BalasHapuspembersih mata solder