AJAX Form Submission

AJAX Form Submit

Submit form data via AJAX using jQuery's $.ajax() or $.post(). Display success or error feedback without reloading the page.

Example

$("#contactForm").on("submit", function(e) {
  e.preventDefault();
  $.post("/api/contact", $(this).serialize())
    .done(function(res) {
      $("#feedback").text("Message sent!").addClass("text-success");
    })
    .fail(function() {
      $("#feedback").text("Error. Please try again.").addClass("text-danger");
    });
});

JAVASCRIPT

Full Editor

Pro Tip

Disable the submit button during the AJAX request to prevent duplicate submissions.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned