Neste artigo você aprenderá a resetar formulário após envio no HTMX, ou seja, ativar a limpeza do formulário depois de um request
Fala programador(a), beleza? Bora aprender mais sobre HTMX!
Antes de seguir com o artigo, não deixe de conferir nosso curso completo de HTMX!
Muitas vezes as aplicações exigem que os formulários sejam resetados após o envio, garantindo uma experiência de usuário limpa e eficiente.
Este artigo explora técnicas eficazes para resetar formulários automaticamente em aplicações web utilizando HTMX!
Solução com HTMX: Utilizando Eventos Customizados
Abordagem Declarativa com HTMX
HTMX oferece uma solução interessante para este problema, permitindo a execução de ações específicas após eventos de solicitação, como o reset do formulário.
A técnica envolve o uso do atributo hx-on::after-request diretamente no elemento do formulário, que escuta o evento after-request e executa uma ação baseada no resultado da solicitação.
<form id="form-mensagem" class="form-mensagem" hx-post="/caminho/para/envio" hx-on::after-request="if(event.detail.successful) this.reset()">
<!-- Campos do formulário aqui -->
<button class="btn-enviar" type="submit">Enviar</button>
</form>
Esta solução assegura que o formulário seja resetado apenas após uma solicitação bem-sucedida, evitando o reset prematuro ou em casos de erro na solicitação.
Extensão Customizada HTMX para Reset de Formulário
Para aqueles que procuram uma solução mais generalizada e reutilizável, uma extensão HTMX customizada pode ser a chave.
Este método envolve a criação de uma extensão que escuta o evento htmx:beforeSwap e, se a solicitação for bem-sucedida sem erros, realiza o reset do formulário ou do elemento de entrada específico que desencadeou a solicitação.
htmx.defineExtension('reset-apos-sucesso', {
onEvent: function(nomeEvento, evento) {
if (nomeEvento !== 'htmx:beforeSwap') return;
if (evento.detail.isError) return;
const elementoGatilho = evento.detail.requestConfig.elt;
if (elementoGatilho.matches('[hx-reset-apos-sucesso]')) {
switch (elementoGatilho.tagName) {
case 'FORM':
elementoGatilho.reset();
break;
// Adicione mais casos conforme necessário
}
}
}
});
Para utilizar esta extensão, simplesmente adicione o atributo hx-reset-apos-sucesso ao formulário desejado, garantindo que a extensão esteja carregada no documento:
<body hx-ext="reset-apos-sucesso">
<form hx-post="/enviar-mensagem" hx-target="#mensagens" hx-swap="afterbegin" hx-reset-apos-sucesso>
<!-- Campos do formulário aqui -->
</form>
</body>
Conclusão
Chegamos ao fim do artigo que explica como resetar formulário após envio no HTMX!
Utilizando as capacidades de eventos customizados do HTMX, podemos aprimorar significativamente a experiência do usuário em suas aplicações, especialmente em funcionalidades de mensagens em tempo real.
Seja através do uso direto de atributos HTMX no formulário ou da implementação de extensões customizadas, é possível garantir que os formulários sejam resetados de forma eficaz após o envio, mantendo a interface do usuário limpa e pronta para novas interações.