Cara Mengirim Form via AJAX dengan jQuery

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

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *