How to submit an AJAX form using jQuery

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

$('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');
    });
});

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');
    });
});

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.112.2/bundle.min.js"></script>

4. Configure your DSN

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });