24.02.2025

Identificando o Botão de Envio Sem jQuery: JavaScript Puro

Resumo Rápido

Você pode determinar qual botão foi clicado (ou extrair informações ocultas) atribuindo um manipulador de eventos onclick único a cada botão que atualiza o valor de um campo oculto do formulário antes da submissão.

<form id="formulário-super-fancy" onsubmit="return agenteSecreto();">
    <input type="hidden" id="mensagem-secreta" name="acao" value="">
    <button type="submit" onclick="document.getElementById('mensagem-secreta').value='salvar'">Salvar</button>
    <button type="submit" onclick="document.getElementById('mensagem-secreta').value='excluir'">Excluir</button>
</form>

Quando o formulário é enviado, o valor do campo 'mensagem-secreta' indicará qual botão foi ativado ('salvar' ou 'excluir'). Este método não requer ferramentas adicionais.

Usando o Evento onSubmit

Como essa tarefa deve ser implementada corretamente? Você precisará de um manipulador de eventos onSubmit confiável.

function agenteSecreto() {
    var codigoMissao = document.getElementById('mensagem-secreta').value;
    alert('Código da Operação: ' + codigoMissao);
    // Processamento da missão
    return false; // Um truque discreto: "Não deixo rastros."
}

Essa função nos permite determinar ações antes que os dados do formulário sejam enviados.

Identificando Cliques nos Botões

Manipuladores de Clique: Seu Kit Secreto

Os manipuladores de clique podem ser vistos como alavancas ocultas que capturam informações sobre cada pressionar de botão.

var ultimoBotaoClicado;

// Manipulador como uma alavanca oculta
function ganchoGrapple(valor) {
  ultimoBotaoClicado = valor;
  document.getElementById('mensagem-secreta').value = valor;
}

Esses manipuladores podem ser facilmente "acionados" de qualquer botão, passando a eles um identificador exclusivo:

<button type="submit" onclick="ganchoGrapple('salvar')">Salvar</button>
<button type="submit" onclick="ganchoGrapple('excluir')">Excluir</button>

Compatibilidade entre Navegadores: Como Normas Internacionais

Assim como ao trabalhar com diferentes idiomas e normas, é importante garantir que seu código funcione corretamente em todos os navegadores. Portanto, cada solução deve ser testada em vários navegadores.

Acessando Elementos do Formulário: É Importante Manter o Controle

Ter um cartão de acesso — informações sobre o formulário por meio do seu identificador exclusivo — o manterá informado sobre o que está acontecendo:

var formularioFancy = document.getElementById('meuFormulario');

Essa abordagem aumenta a confiança na escrita do código.

Preservando o HTML Original: Elegância e Discrição

O objetivo é integrar os manipuladores de eventos na estrutura HTML existente sem deixar mudanças visíveis na aparência dos botões.

Visualização

Pense no formulário HTML como um painel de controle com múltiplos botões funcionais:

Painel de Controle 🎮
      [Salvar]              [Excluir]
            💾                  ❌

Quando um operador (usuário) seleciona um comando (clica em um botão), o painel de controle (formulário) reconhece o comando:

function interpretarComando(event) {
    // Comando recebido: [Salvar] ou [Excluir].
    const comandoRecebido = event.submitter ? event.submitter.id : 'salvar';
    console.log(`Comando '${comandoRecebido}' recebido.`);
}

Ativar um comando aciona a resposta correspondente do painel de controle (formulário):

🎮 Resposta:
- 💾: "Comando 'Salvar' aceito."
- ❌: "Comando 'Excluir' aceito."

As ações são executadas com base na operação selecionada! ✨

Outro Método de Identificação: Usando Nomes Exclusivos para os Botões

Você pode atribuir a cada botão um nome exclusivo, semelhante a dar nomes de código únicos para agentes:

<button name="acao" value="salvar" type="submit">Salvar</button>
<button name="acao" value="excluir" type="submit">Excluir</button>

O comando passado pelo formulário pode ser identificado dentro do evento onSubmit, mesmo que a ação específica não tenha sido mencionada explicitamente:

function agenteSecreto(event) {
    var comandoRecebido = this.acao.value || 'salvar'; // Padrão - 'Salvar'
    console.log('Comando recebido:', comandoRecebido);
    return false; // "Meu trabalho não é enviar o formulário."
}

Lidando com Respostas de Formulário com Estilo

Usar Promise e funções assíncronas em JavaScript é como convocar agentes de elite para realizar tarefas após o processamento de dados:

async function agenteEliteFormulario(event) {
    // Realizando operações secretas aqui
    const resposta = await fetch('/submit', {
        method: 'POST',
        body: new FormData(event.target),
    });

    // Instruções sobre ações: processando resposta
    const resultado = await resposta.json();
    console.log('Resposta da Central:', resultado.mensagem);
}

Problemas Comuns ou Desafios Durante a Operação Secreta

Você deve estar preparado para as seguintes situações (elementos de um thriller de espionagem):

1. Comportamento Síncrono: Certifique-se de que o valor da 'mensagem-secreta' é definido antes do evento onSubmit.
2. Propagação de Eventos: Confirme que clicar no botão também aciona o evento onSubmit do formulário.
3. Acessibilidade do Formulário: Garanta que todos os botões do formulário sejam facilmente acessíveis, inclusive para usuários de teclado.

Recursos Úteis

1. Método submit() do HTMLFormElement - Web API | MDN — Conheça os recursos do método submit() em formulários HTML.
2. Atributo de Evento onsubmit em HTML — Entenda como usar o atributo onSubmit em formulários HTML.
3. Editor Tryit do W3Schools — Experimente no playground do Editor Tryit.
4. Obtendo Valores de Formulário HTML - Stack Overflow — Aprenda como extrair valores de formulários.
5. Objeto FormData - Web API | MDN — Domine o trabalho com o objeto FormData para executar suas tarefas.

Video

Navigation