Mengirim form tanpa memuat ulang halaman memberi pengalaman mulus, misalnya form kontak atau komentar. Artikel ini membahas cara mengirim form via AJAX dengan jQuery.
Menggabungkan submit, preventDefault, dan serialize
<script>
$("#formku").submit(function(e) {
e.preventDefault(); // cegah reload
$.post("simpan.php", $(this).serialize(), function(res) {
$("#pesan").text("Data tersimpan!");
$("#formku")[0].reset();
});
});
</script>
Contoh Kasus: Form Kontak Lengkap dengan Umpan Balik
<script>
$("#kontak").submit(function(e) {
e.preventDefault();
$("#kirim").prop("disabled", true).text("Mengirim...");
$.post("kirim.php", $(this).serialize(), function(res) {
$("#status").text(res.pesan);
$("#kirim").prop("disabled", false).text("Kirim");
}, "json");
});
</script>
Kesimpulan
Pola submit + preventDefault + serialize + $.post adalah cara baku mengirim form via AJAX. Tambahkan penonaktifan tombol untuk mencegah klik ganda. Jangan lupa validasi ulang di sisi server.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

