Submit fora de formulário no HTMX

Neste artigo você aprenderá a criar um Submit fora de formulário no HTMX, utilizando uma estratégia bem simples, vem conferir!

Fala galera, beleza?

Antes de seguir com o artigo, não deixe de conferir nosso curso completo de HTMX!

HTMX é uma ferramenta poderosa que permite aos desenvolvedores web melhorar a interatividade das aplicações sem necessitar de JavaScript complexo ou frameworks frontend pesados.

Uma questão comum entre os usuários de HTMX é como submeter um formulário usando um botão ou input de submissão que está fisicamente fora do <form>, e é exatamente isso que vamos ver aqui!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Estratégias para Submissão Externa de Formulários com HTMX

1. Usando JavaScript para Disparar um Evento de Submissão

A primeira abordagem envolve o uso de JavaScript para capturar o clique em um botão externo e, em seguida, disparar programaticamente um evento de submissão no formulário desejado.

Embora essa técnica recorra a JavaScript, ela mantém a simplicidade do HTMX ao minimizar o código necessário:

document.getElementById('external-submit-button').addEventListener('click', function() {
    document.getElementById('your-form-id').dispatchEvent(new Event('submit'));
});

2. Atributos HTMX para Incluir Dados de Formulário Externos

A segunda solução utiliza recursos do próprio HTMX para incluir dados de um formulário na solicitação, mesmo quando o botão de submissão está fora do <form>.

Usando o atributo hx-post no botão externo junto com hx-include, é possível indicar quais dados do formulário incluir na solicitação HTTP:

<button hx-post="/url" hx-include="#form-id" hx-target="#response-target">
    Enviar
</button>

Incluindo Campos Externos ao Formulário

HTMX também oferece uma maneira de incluir campos que estão fora do <form> na submissão, usando o atributo form em inputs HTML:

<form id="form" hx-get="/url" hx-trigger="submit" hx-target="#results">
    <!-- Campos do formulário aqui -->
</form>

<input type="checkbox" id="external-checkbox" name="additional-option" form="search-form">
<button type="submit" form="search-form">Buscar</button>

<div id="results"></div>

Neste exemplo, tanto o checkbox quanto o botão de submissão estão fora do <form>, mas são incluídos na submissão através do atributo form.

Conclusão

Enviar formulários com botões externos em HTMX pode ser realizado de maneira eficaz através destas duas abordagens.

Isso permite uma maior flexibilidade no design da interface do usuário e melhora a experiência do usuário ao permitir layouts mais complexos e interativos.

A capacidade de incluir campos externos ao formulário principal também abre novas possibilidades para captura de dados sem comprometer a estrutura do formulário.