Sentry Answers>JavaScript>

How to submit an AJAX form using jQuery

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:

Click to Copy
<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:

Click to Copy
$('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:

Click to Copy
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.

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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.

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