How to submit an AJAX form using jQuery

Matthew C.

The Problem

You want to submit form data in an asynchronous HTTP request using JavaScript (AJAX). You may want to do this to add custom client-side form validation. Suppose you have the following form, with a name and email input:

<form> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Name" /> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="email@example.com" /> <button type="submit">Submit</button> </form>

How do you submit this form using jQuery?

The Solution

You can use the jQuery ajax() method to perform an AJAX request:

$('form').submit(function (e) { e.preventDefault(); const data = { name: $('#name').val(), email: $('#email').val(), }; $.ajax({ type: 'POST', url: 'http://localhost:1337/api/form', data: JSON.stringify(data), contentType: 'application/json', }) .done((data) => { console.log({ data }); }) .fail((err) => { console.error(err); }) .always(() => { console.log('always called'); }); });

Here we select the form element and then bind a submit event handler function to the form using the jQuery submit() method. We prevent the form from being submitted to the server by calling the Event.preventDefault() method in the event handler. This allows us to control the form submission with jQuery.

We then get the value of the inputs and use the ajax() method to post the data to the server. The body data type in data must match the “Content-Type” header.

You can also use the jQuery post() method to specifically make AJAX POST requests.

After a successful POST request, the done() method is called. If an error occurs, the fail() method is called. You can use these callback functions for client-side data validation. The always() callback runs if the request is successful or if there is an error.

You can also use vanilla JavaScript to make an AJAX request using the Fetch API:

const form = document.querySelector('form'); async function postData(url = '', data = {}) { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); if (!response.ok) { throw new Error('Network response was not OK'); } return response.json(); } form.addEventListener('submit', (e) => { const formInputs = form.getElementsByTagName('input'); let formData = {}; for (let input of formInputs) { formData[input.name] = input.value; } e.preventDefault(); postData('http://localhost:1337/api/form', formData) .then((data) => { console.log({ data }); }) .catch((err) => { console.error(err); }) .finally(() => { console.log('always called'); }); });

A fetch() promise will only be rejected if the server can’t send a response. This happens when there’s a network or CORS error. To check if a response was successful, you need to check the boolean Response.ok property. The response is successful when the status is in the range of 200-299.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.111.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.