How to submit an HTML form without redirection

javascript

ajax

form-validation

javascript-best-practices

byAnton Shumikhin·Oct 22, 2024

Submitting HTML form without page redirection is achieved with AJAX and the fetch API in JavaScript. An event listener should be attached to your form to intercept the submit event and send off form data using fetch. Here’s an optimized code snippet:

document.querySelector('form').onsubmit = event => {
  event.preventDefault(); // Halt! Who goes there? (Stops the form submission)
  fetch(event.target.action, {
    method: 'POST', // Sending via POST
    body: new FormData(event.target) // Form data tagged and bagged
  })
  .then(resp => resp.json())
  .then(data => console.log('Success:', data)) // Phew! It worked.
  .catch(err => console.error('Error:', err)); // If things go south
};

This cunning method carries out an asynchronous POST request, whilst the user remains on the same page wondering what happened.

Practical approaches & helpful alternatives

The fetch API is an effective and contemporary method to submit forms without redirection. However, let's review a few JavaScript techniques and possible glitches that might shake your confidence.

The harmless iframe workaround

By setting the form's target attribute to the name of an invisible iframe, you can trick the form to submit to the iframe, preventing the page from any form of misdirection:

<iframe name="hiddenFrame" style="display:none;"></iframe>
<form action="/submit-form" method="post" target="hiddenFrame">
  <!-- form elements AKA your secret ingredients -->
</form>

Implementing jQuery Ajax for form submission

If your project workforce is jQuery, using .ajax() should make for a quick and effortless tool:

$('form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      alert('Form Submitted! High five ✋');
    }
  });
});

Manipulating FormData in XMLHttpRequest

When you're itching for granular control over the submission process, opt for FormData with XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function () {
  // Handle response.
  alert('Form Submitted! 🎉');
};
var formData = new FormData(document.querySelector('form'));
xhr.send(formData);

Making the most of form attributes dynamically

When imposing AJAX submissions on multiple forms, accessing form attributes dynamically can be a powerful ally:

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  var form = $(this).closest('form');
  var actionUrl = form.attr('action'); // Cleverly acquires dynamic action URL
  // Proceeds with AJAX having `actionUrl` as guide
});

Focus on form security

Emphasize on using method="post" to ensure secure data exchange, especially when handling sensitive data.

Common challenges & how to tackle them

Submitting forms without redirection is straightforward until you run into a few hurdles. Good news is, there are solutions to all.

Submitting status awareness

Without redirection, make it a point to communicate a status update to the user post submission. Success callbacks in an AJAX script, or .then() in fetch, allow you to trigger alerts, orchestrate UI adjustments, or log to the console.

Prevalence of form validation

Whether you like it or not, validation on the client-side before form submission is crucial. You might as well verify each field or employ a library like Formik in your React apps to manage validation states.

Reliance on JavaScript

Keep in mind, the fancy method here relies on JavaScript, which must be enabled in the user's browser. As a safety net, consider having a conventional form submission as a default behavior.

Cross-browser compatibility

Ensure cross-browser support for all your users, even if they're stuck with older browsers.

Best practices & final thoughts

Choose the toolset that fits you: jQuery when it's all about simplicity or vanilla JS if prefer no-library scenario.
In case you opt for iframe method, "hide" the iframe as much as possible i.e., at the bottom of the page to prevent UI changes post submission.
In order to make the invisible iframe method stay relevant, ensure you're using valid, practical form action URLs.
Prioritize unobtrusive JavaScript for binding events to gain clean, unadulterated HTML.