jQuery Academy · Lesson

AJAX Form Submission and Feedback

Master submitting form data asynchronously via AJAX, providing real-time user feedback, and handling server responses without full page reloads for a smoother UX.

Smooth Forms with AJAX

Imagine submitting a form without the entire page reloading! That's the magic of AJAX form submission.

Instead of a full page refresh, AJAX lets you send form data to a server in the background. This provides a much smoother, faster user experience, perfect for comments, sign-ups, or quick updates.

Stopping Default Submission

The first step in an AJAX form submission is to prevent the browser's default behavior. If you don't, the page will reload as usual, defeating the purpose of AJAX!

We achieve this by calling event.preventDefault() inside our form's submit handler.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

All lessons in this course

← Back to jQuery Academy