Tutorial Lengkap Cara Membuat Submit Form Dengan jQuery Ajax
25 Maret 2016
25 Maret 2016
Kali ini saya akan membuat artikel tentang membuat kirim formulir dengan ajax atau bagaimana membuat membuat kirim formulir tanpa memuat ulang halaman. Jadi, kompilasi kita men-kirimkan formulir atau mengirim data ke server-sisi yang tidak perlu memuat ulang halaman.
Untuk memahami dari ajax itu sendiri, googling dan yang akan kita gunakan adalah fungsi ajax dari jQuery untuk selengkapnya klik disini. Tidak bisa basa-basi lagi ya .. langsung aja gulir kebawah 😀
Langkah demi Langkah adalah sebagai berikut;
1. Struktur file untuk tutorial ini.
2. Buka text editor kesayangan kamu dan tuliskan coding seperti berikut.
<!DOCTYPE html> <html> <head> <title>Submit Form jQuery Ajax</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrap"> <form method="post" action="proses.php"> <h2>Status</h2> <textarea name="status" class="status" placeholder="Sedang memikirkan apa?"></textarea> <button class="btn" type="submit">Kirim</button> </form> <script type="text/javascript"> $(function(){ $("form").submit(function(){ $.ajax({ url:$(this).attr("action"), data:$(this).serialize(), type:$(this).attr("method"), dataType: 'html', beforeSend: function() { $("textarea").attr("disabled",true); $("button").attr("disabled",true); }, complete:function() { $("textarea").attr("disabled",false); $("button").attr("disabled",false); }, success:function(hasil) { var txt = $("textarea"); if(txt.val().trim().length < 1) { alert("Status masih kosong"); }else{ $("#data_status").after(hasil); $(".status-box").eq(0).hide().fadeIn(); $("#data_status h1").remove(); $("form")[0].reset(); setTimeout(function(){ $("textarea").focus(); },1000); } } }) return false; }); }); </script> <div id="data_status" class="data"> <h1>Tidak Ada Data Status</h1> </div> <!-- Data Status Akan Ditampilkan disini --> </div> </body> </html>h
3. Simpan file diatas dengan nama index.php, kemudian buat file baru lagi dan tuliskan coding seperti ini:
<?php if($_POST) { $status = $_POST['status']; echo "<div class=\"status-box\"> <div class=\"user\"> <div class=\"foto\"></div> <div class=\"desc\"> <div class=\"nama\"> Anonymous </div> <div class=\"tanggal\"> Beberapa detik yang lalu </div> </div> </div> <div class=\"isi\"> $status </div> <div class=\"footer\"> <a href=\"javascript:alert('ini hanya contoh');\">Like</a> • <a href=\"javascript:alert('ini hanya contoh');\">Komentari</a> • <a href=\"javascript:alert('ini hanya contoh');\">Bagikan</a> </div> </div>"; }
4. Simpan file diatas dengan nama proses.php, kemudian buat file baru lagi dan tuliskan coding seperti dibawah ini:
body { background: #eee; font-family: arial; } .wrap { width: 600px; margin: 0 auto; position: relative; display: block; } form { width: 100%; background: #fff; padding: 10px; display: inline-block; } form h2 { margin: 5px 0; margin-top: 0; font-size: 16px; font-family: arial; } .status { width: 580px; padding: 10px; font: 12px arial; border: 1px solid #ddd; border-left: none; border-right: none; resize:none; } .btn { float: right; padding: 3px 12px; background: #3498db; border: 1px solid #2467db; border-radius: 3px; color: #fff; text-decoration: none; margin-top: 5px; cursor: pointer; transition:all .3s; } .btn:hover { background: #2467db; } .btn:disabled { background: #999; } .data h1 { text-align: center; font-size: 22px; color: #999; } .status-box { width: 600px; background: #fff; padding: 10px; margin-bottom: 10px; } .status-box .user { width: 100%; display: inline-block; } .status-box .user .foto { float: left; width: 40px; height: 40px; background: #eee; border-radius: 3px; } .status-box .user .desc { float: left; margin-left: 10px; font-size: 14px; } .status-box .user .desc .nama { display: block; width: 100%; font-weight: bold; } .status-box .user .desc .tanggal { display: block; width: 100%; font-style: italic; margin-top: 5px; font-size: 12px; } .status-box .isi { font-size: 14px; margin-top: 20px; } .status-box .footer { margin-top: 15px; } .status-box .footer a { color: #333; text-decoration: none; font-size: 14px; } #data_status { margin-top: 10px; }
5. Simpan file diatas dengan nama style.css.
6. Silahkan Unduh file jquery.min.js berikut, ganti nama file tersebut menjadi jquery.js dan simpan dalam satu folder yang sama.
7. Terakhir silahkan jalankan dibrowser kesayangan kamu.
8. Selesai.
Akhir Kata
Pada tutorial ini kita sudah membuat form kirim dengan jquery ajax 🙂 Tutorial jquery ajax ini mungkin masih dasar, karena kita belum terhubung dengan database mungkin di tutorial selanjutnya saya akan membuat tutorial semacam itu terima kasih dan sampai jumpa.
