Form submission handling: AJAX, redirects, and progressive enhancement

The user clicks submit. What happens next? The browser sends the data to the server. The server processes it. Then what? Does the page reload? Does something appear on the page? Does the user get redirected somewhere?

Form submission handling is the bridge between the frontend and backend. Do it wrong and the user is confused. Do it right and the experience feels smooth and intentional. This article covers the different ways to handle form submissions.

Traditional form submission

In a traditional form submission, the browser sends the form data to the server using the form's action and method attributes.

<form action="/submit" method="POST">

<input type="text" name="email">

<button type="submit">Send</button>

</form>

When the user clicks the button, the browser encodes the form data and sends it to /submit. The server processes it and responds with a new page. The browser loads that page. The user sees a new URL and new content.

Traditional submission is simple, works everywhere, and works without JavaScript. The main disadvantage is that the page reloads, which feels slow even if it is not, causing the user to lose their scroll position and clearing the form fields.

Form submission with redirects

After the server processes a form, it usually redirects the user to a success page or back to the form.

On the server, after processing the form, use return redirect('/thank-you'), which sends an HTTP 303 redirect response so the browser follows the redirect and loads the /thank-you page where the user sees new content at a new URL. The advantage is that the user knows the form was processed and a new page makes it clear something happened. The disadvantage is that the page reloads, requiring two requests to the server (one for form submission, one for the redirect target), which makes the experience feel slower than necessary.

AJAX form submission

AJAX (Asynchronous JavaScript and XML) lets you send form data without reloading the page using form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await fetch('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. The browser sends the form data using fetch, the server processes it and responds, and the JavaScript receives the response and updates the page with no reload or redirect. The user stays on the same page but sees confirmation. The advantage is that it is fast, provides a smooth experience, has no page reload, and gives you full control over what happens next. The disadvantage is that it requires JavaScript, and if JavaScript fails, the form does not submit, history is not updated (the URL stays the same), and you have to handle all user feedback yourself.

Progressive enhancement with AJAX

Progressive enhancement means the form works without JavaScript but works better with it. Start with a traditional form that works without JavaScript where the form submits and the page redirects to thank you. Then, if JavaScript is available, intercept the submit event with addEventListener using if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } to send via AJAX instead and show a message on the same page. Now the form works in both scenarios. With JavaScript, it submits with AJAX and the user stays on the page. Without JavaScript, it submits traditionally and redirects. The advantage is that the form works for everyone, and users with JavaScript get the smooth experience while those without it still get the form to work. The disadvantage is more code because you have to maintain both submission paths.

Handling form submission errors

When the server rejects a form submission (validation fails, database error, etc.), you have two approaches. For traditional submission, the server re-renders the form with error messages and displays them to the user. For AJAX submission, the server responds with error status code (400, 422) and error messages, and the JavaScript shows the errors on the page using fetch('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Always show errors next to the fields that caused them rather than hiding them in a summary so the user can see exactly what went wrong and where to fix it.

Handling loading states

When the form is submitted, disable the submit button so the user does not click it twice and show a loading spinner or message using form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await fetch('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Disable the button immediately because if the request takes 5 seconds, the user might click again thinking it did not work.

What to do after successful submission

After the form submits successfully, you have options. You can clear the form fields, show a thank you message, redirect to a thank you page, send the user an email, return them to the previous page, or stay on the form and let them submit again. Choose based on your form's purpose. A contact form should show a thank you message, a booking form should redirect to the booking confirmation, and a newsletter signup should return them to the page they were on.

How WEMASY handles form submission

WEMASY forms support both traditional submission and AJAX. Configure what happens after submission: show a message, redirect to a URL, or send an email notification. WEMASY validates on both client and server.

See form submission options in your WEMASY plan.

Frequently asked questions