Hiding Form input During htmx Request
=====================================

I am working on fokais.com's signup page, and I want to hide the form input during an htmx request. I was seeing some issues where I was able to prevent...

Date: December 14, 2023

I am working on fokais.com's signup page, and I want to hide the form input during
an htmx request. I was seeing some issues where I was able to prevent spamming
the submit button, but was still able to get one extra hit on it.

It also felt like nothing was happening while sending the email to the user for
verification. Now I get the form to disappear and a spinner to show during the
request.

## HTML

Let's start off with the form. It uses htmx to submit a post request to the
`post_request` route. Note that there is a spinner in the `post_request` with the
`htmx-indicator` class.

The intent is to hide the spinner until the request is running, and hide all of
the form input during the request.

```html

 {% if full_name_error %}

 {{ full_name_error }}

 {% endif %}

 {% if username_error %}

 {{ username_error }}

 {% endif %}

 {% if email_error %}

 {{ email_error }}

 {% endif %}

 Signing up...

```

Yes this is styled using tailwindcss.

[https://waylonwalker.com/still-loving-tailwind/](https://waylonwalker.com/still-loving-tailwind/){.hoverlink}

## CSS

Let's take a look at how we achieve switching between only spinner an only form
inputs using css.

```css
.htmx-indicator {
 @apply hidden;
 opacity: 0;
 transition: opacity 500ms ease-in;
}
.htmx-request button,
.htmx-request input[type="submit"],
.htmx-request input,
.htmx-request label {
 @apply hidden;
}
.htmx-request .htmx-indicator {
 opacity: 1;
 @apply block;
}
.htmx-request.htmx-indicator {
 opacity: 1;
 @apply block;
}
```

## Final Result

Here is the final result of me signing up for a new account in fokais.

![Final Result](https://images.waylonwalker.com/fokais-signup.mp4)