[Fixed] Swap a form on error, or redirect on success using HTMX – Htmx

The Problem:

A login form is set up to handle errors and redirect to a profile page based on the backend response codes. However, HTMX is rendering the entire profile page in the login form instead of redirecting, despite using the HX-Location header. The goal is to have the form re-rendered on errors (400 Bad Request) and redirect the user to their profile page on success (200 OK).

The Solutions:

Solution 1: Use Conditional Redirection Headers Based on HTMX Request

The issue arises when both `Location` and `HX-Location` headers are present in the response. To resolve this, implement conditional redirection based on the presence of the `HX-Request` request header:

1. Backend Logic:

In the backend, check if the request contains the `HX-Request` header. If it does, it indicates an HTMX request, so respond with the `HX-Location` header containing the URL to redirect to. Otherwise, respond with the traditional `Location` header.

2. Frontend Logic:

In the frontend, remove the `hx-target` attribute from the form. This ensures that the entire page is not rendered in the form’s container on redirection.

3. Response Handling:

When the frontend receives a response, it checks for the presence of both headers. If it finds the `HX-Location` header, it initiates a client-side redirect to the specified URL. If it only finds the `Location` header, it performs a full page redirect.

This solution ensures that the form is re-rendered on errors (400 Bad Request) and the user is redirected to the specified page on success (200 OK) while maintaining compatibility with non-HTMX requests.

Solution 2: Custom JavaScript

To differentiate between HTMX and non-HTMX requests, add an hx-trigger attribute to your form. This attribute will specify a custom JavaScript function that will handle the htmx:afterOnLoad event, which fires after HTMX processes a response:

<div id="login_form" hx-ext="response-targets">
    <form action="/login" method="POST" hx-boost="true" hx-target="#login_form" hx-target-400="#login_form" hx-swap="innerHTML" hx-trigger="handleResponse">
        ...
        <button type="submit">Log in</button>
    </form>
</div>

Once the hx-trigger attribute is added, define the handleResponse function in your JavaScript code. This function will check for the HX-Location header in the HTMX response and perform a redirection if it is present:

function handleResponse(event) {
    // Extract the HX-Location header from the HTMX response
    var hxLocation = event.detail.xhr.getResponseHeader('HX-Location');
    
    // If the HX-Location header is present, perform a redirection
    if (hxLocation) {
        window.location.href = hxLocation;
    }
}

If the server responds with a HX-Location header, the handleResponse function will catch it and redirect the user to the specified URL, overriding the default behavior of HTMX in this scenario. On the other hand, if the server responds with a 400 status code, the hx-target-400 attribute will still work as intended, and HTMX will re-render the form with the outlined errors.

This solution ensures that form re-rendering and user redirection are handled correctly depending on the server response.

Video Explanation:

The following video, titled "Modal forms with Django+HTMX - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

The solution presented here requires very few JavaScript lines, renders form errors nicely, and refreshes the main page on success. The ...