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.
Custom Search
1$ | Donasi Kopi Untuk Sang Creator
Completely synergize resource is taxing relationships via premier are man niche markets. Professionally cultivate one to one customer.
Kategori
- Adobe
- Android
- Anti Virus
- Browser
- Canon Printer
- Design
- Desktop Programming
- Domain & Hosting
- Elektronika
- Freebies
- Games
- Games Ringan Pilihan
- Graphic Design
- How To
- Internet
- Kabel & Konektor
- Laptop Driver
- Linux
- Marketing
- Mikrotik
- Networking Area
- Office
- Out Of Topics
- Printer Driver
- Seo
- Software
- Technology
- Tools
- Uncategorized
- Utilities
- We Love ♥ Google
- Web Design
- Web Development
- Windows
Recent News
PERINTAH DASAR LINUX | LENGKAP UNTUK PEMULA
10 Maret 2021
Cara Mengganti Static ke Dynamic IP Address di Windows 10
15 Februari 2021
Tag
Arsip
- Maret 2021
- Februari 2021
- Januari 2021
- Desember 2020
- November 2020
- Oktober 2020
- September 2020
- Agustus 2020
- Juli 2020
- Juni 2020
- Mei 2020
- April 2020
- Maret 2020
- Februari 2020
- Januari 2020
- November 2019
- Oktober 2019
- September 2019
- Mei 2019
- April 2019
- Maret 2019
- Februari 2019
- Januari 2019
- Desember 2018
- November 2018
- September 2018
- Agustus 2018
- Juli 2018
- Juni 2018
- Mei 2018
- April 2018
- Maret 2018
- Februari 2018
- Januari 2018
- Desember 2017
- November 2017
- September 2017
- Agustus 2017
- Juli 2017
- Mei 2017
- April 2017
- Maret 2017
- Februari 2017
- Januari 2017
- Desember 2016
- November 2016
- Oktober 2016
- September 2016
- Agustus 2016
- Juni 2016
- Mei 2016
- April 2016
- Maret 2016