Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery

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
?
1
2
3
<!--
<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
Download sweet alert disini dan jquery disini
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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--
<!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.
SHARE

Rava Nasution

I'm Rava Nasution, Writer and Accountant. Inspired to make things looks better.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

2 comments:

  1. wah mainan script, melipir deh, berat buat aku hehe, keren!

    ReplyDelete

luvne.com ayeey.com cicicookies.com mbepp.com tipscantiknya.com kumpulanrumusnya.comnya.com