24.02.2025

Determinando o Botão de Envio Ativo em um Formulário

Resposta Rápida

Para diferenciar dois elementos de envio em um único formulário, atribua atributos name e value únicos a cada um deles. Dessa forma, o servidor será capaz de identificar qual botão foi ativado. Aqui está um exemplo de código:

<form action="handler.php" method="post">
  <!-- Campos ocultos para o formulário podem ir aqui -->

  <!-- Botão para salvar os dados -->
  <button type="submit" name="submitAction" value="save">Salvar</button>

  <!-- Botão para publicar os dados -->
  <button type="submit" name="submitAction" value="publish">Publicar</button>
</form>

No lado do servidor, você verifica o valor do atributo submitAction para entender qual ação foi realizada: "save" ou "publish".

Determinando a Ação no Servidor

No script do servidor (por exemplo, em handler.php), a ação do usuário é definida verificando o valor de submitAction: se deve salvar os dados ou publicá-los.

if ($_POST['submitAction'] == 'save') {
  // Lógica para salvar os dados do formulário vai aqui
} elseif ($_POST['submitAction'] == 'publish') {
  // Lógica para publicar os dados do formulário vai aqui
}

Essa abordagem reduz a dependência da lógica do script em relação ao texto exibido nos botões, aumentando assim a confiabilidade do script.

Pontos-Chave e Variações de Soluções

Usando o Atributo formaction para Ações Diferentes

Se cada botão requer uma ação única que é implementada por manipuladores diferentes, utilize o atributo formaction:

<button type="submit" formaction="save.php">Salvar</button>
<button type="submit" formaction="publish.php">Publicar</button>

Essa abordagem permite que você direcione os dados para a URL correspondente e simplifica o manuseio das ações dos botões no lado do servidor.

Escolhendo Entre <button> e <input>

A tag <button> é considerada mais versátil e suporta configurações personalizadas, enquanto <input type="submit"> também é adequado para uso:

<input type="submit" name="submitAction" value="save" />
<input type="submit" name="submitAction" value="publish" />

Essa escolha depende das necessidades da interface do usuário e da compatibilidade com navegadores adequados.

Suporte a Navegadores Legados

Se você precisar oferecer suporte a navegadores legados, pode adicionar compatibilidade retroativa usando JavaScript:

document.getElementById('publishButton').addEventListener('click', function() {
  // Definindo o caminho para enviar os dados para publish.php
  this.form.action = 'publish.php';
});

Navegando em Problemas e Armadilhas

Características do Uso do Método GET

Lembre-se de que ao usar o método GET, os parâmetros do formulário são passados na URL. Isso pode ser problemático para dados sensíveis.

Verificando Estados Indefinidos no Servidor

Sempre inclua lógica em seu script para lidar com casos em que o valor de submitAction possa estar ausente ou indefinido. Isso é fundamental para garantir a segurança do seu servidor.

Visualização

Todos nós temos uma imagem familiar de um sistema com duas chaves, cada uma destrancando sua própria porta:

Chave 1: 🗝️ (Enviar Pedido)
Chave 2: 🗝️ (Salvar para Depois)

A implementação de dois botões de envio se parece com isto:

<form>
  <button type="submit" name="action" value="submit-order">🗝️ Enviar Pedido</button>
  <button type="submit" name="action" value="save-later">🗝️ Salvar para Depois</button>
</form>

Quando clicamos em 'Enviar Pedido':
🗝️ -> 📦 (Pedido Enviado)

Quando clicamos em 'Salvar para Depois':
🗝️ -> 💾 (Dados Salvos)

Cada botão tem seu value único, que reflete seu propósito.

Dicas Úteis para uma Experiência Mais Confortável

Use Nomes de Botões Significativos

Dê aos botões nomes descritivos que falem por si mesmos, facilitando a manutenção do código a longo prazo.

Texto Interno do Botão Pode Melhorar a Interação do Usuário

Preencha a tag <button> com texto interno que oriente o usuário e melhore a interação.

Métodos de Submissão e Proteção de Dados

Escolha o método de submissão de dados (GET ou POST) com base nos requisitos de segurança e no volume de dados que está sendo transmitido.

Links Úteis

1. Documentação do Mozilla MDN sobre o elemento <button> - para reforçar a compreensão sobre o uso de vários botões de envio.
2. Página do Stack Overflow sobre dois botões de envio em um formulário - para dicas práticas e exemplos.
3. Manipulação de Eventos no DOM - JavaScript no w3schools - sobre a prática de usar eventos em JavaScript.
4. O atributo formaction da tag <button> no w3schools - para entender a especificação do atributo formaction.

Video

Navigation