jQuery Submit Form — Legacy Codebase Reference

<form id="contact">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button id="submit" type="submit">Send</button>
</form>
<p id="status"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$("#contact").on("submit", function (e) {
  e.preventDefault();
  const $form = $(this);
  const $submitBtn = $("#submit");
  const $status = $("#status");

  $submitBtn.prop("disabled", true);
  $status.text("Sending…");

  $.ajax({
    url: "https://splitforms.com/api/submit",
    method: "POST",
    data: new FormData(this),
    processData: false,
    contentType: false,
  }).done(function (data) {
    if (data.success) {
      $status.text("Thanks!");
      $form[0].reset();
    } else {
      $status.text(data.message || "Error.");
    }
  }).fail(function () {
    $status.text("Network error.");
  }).always(function () {
    $submitBtn.prop("disabled", false);
  });
});
</script>

If your codebase already includes jQuery, `$.ajax` is the natural way to submit forms. Same mechanics as vanilla fetch — intercept submit, POST, update UI based on response — but with jQuery's chained-Promise syntax (`.done()`, `.fail()`, `.always()`) instead of async/await.

The critical bits for FormData submission with jQuery are `processData: false` (don't let jQuery URL-encode the FormData object — let the browser handle the multipart encoding) and `contentType: false` (don't let jQuery set the Content-Type header — the browser sets it with the correct boundary string for multipart/form-data). Miss either and the upload fails silently.

`.done()` fires on HTTP 2xx; `.fail()` fires on network errors and HTTP 4xx/5xx; `.always()` runs after either. Use `.always()` to re-enable the submit button regardless of outcome — same pattern as vanilla JS's `finally` block.

For new projects in 2026, prefer fetch over $.ajax. Same capabilities, no 90KB jQuery dependency, native browser API. Only use $.ajax if your codebase already pulls jQuery for other reasons.

Legacy codebases only. New projects use fetch.