Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Alert Indah dengan Sweet Alert Melalui Form Submit Jquery

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

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
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

<!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.

Post a Comment

17 Comments

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download Now

      >>>>> Download Full

      Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download LINK

      >>>>> Download Now

      Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download Full

      >>>>> Download LINK wi

      Delete
  2. passwordnya salah mas, yg bener apaan????
    ga niat share nih..

    ReplyDelete
    Replies
    1. aguzrybudy.blogspot.co.id passwordnya

      Delete
    2. coba deh mas download lalu di extract dulu mas pake password itu , file yg lain sih bener passwordnya tp yg ini salah mas..

      Delete
    3. Kalau gitu kirim aja email mas, biar saya kirim kodenya

      Delete
  3. passwordnya salah mas, kalau boleh minta di kirim ke email saya mas :)
    m.fakih07@gmail.com

    ReplyDelete
  4. minta filenya mas firdsm@gmail.com terima kasih

    ReplyDelete
  5. Replies
    1. aguzrybudy.blogspot.co.id, kalau gak bisa mas kasih email mas biar saya kirim kodenya

      Delete
  6. Minta file nya gan. haekal9e@gmail.com
    Terima Kasih

    ReplyDelete
  7. email gan oktovianpa@gmail.com
    thanks

    ReplyDelete
  8. terimakasih ilunya mas, cuma kalo pake framework Codeigniter dimna yah letakin script sweet alertnya, makasih. :)

    ReplyDelete
  9. saya pake password ini aguzrybudy.blogspot.co.id bisa mas terimakasih :)

    ReplyDelete
  10. Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download Now

    >>>>> Download Full

    Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download LINK

    >>>>> Download Now

    Cara Membuat Alert Indah Dengan Sweet Alert Melalui Form Submit Jquery >>>>> Download Full

    >>>>> Download LINK PU

    ReplyDelete

Berkomentarlah dengan baik dan sopan

Rekomendasi Untuk Anda × +