28.11.2024

Adicionando e Controlando Campos de Entrada em Formulários JavaScript

Resposta Rápida

Para excluir um elemento de entrada do processo de envio do formulário, você pode utilizar JavaScript para desabilitá-lo logo antes do envio:

document.querySelector('form').onsubmit = function() {
  document.querySelector('#excluirInput').disabled = true;
};

Esse método irá excluir os dados do elemento com o id #excluirInput durante a serialização do formulário.

Você também pode simplesmente omitir o atributo name para o elemento específico:

<input type="text" id="excluirInput">

Sem o atributo name, as informações do elemento de entrada não serão enviadas.

Expandindo a Funcionalidade

Tornando os Controles do Formulário Informativos

Se um elemento de entrada tem uma função exclusivamente informativa, você pode torná-lo somente leitura:

<input type="text" id="excluirInput" readonly>

Dessa forma, o usuário poderá copiar os dados, mas não poderá alterá-los ou enviá-los.

Trabalhando com Formulários Dinâmicos

Gerenciar campos adicionados dinamicamente pode ser feito em JavaScript da seguinte forma:

$('form').on('submit', function() {
  $('#excluirInput').remove();
});

Esse código remove o elemento de entrada do DOM pouco antes do envio do formulário.

Armazenando Dados de Formulários no Lado do Cliente

Para trabalhar com dados de formulário serializados no lado do cliente, você pode evitar adicionar elementos separados:

$('form').on('submit', function(e) {
  e.preventDefault();
  var formData = $(this).serializeArray().filter(function(item) {
    return item.name !== 'excluirInput';
  });
  $.ajax({
    url: this.action,
    type: this.method,
    data: formData,
    success: function(response) {
      // Lidar com a resposta do servidor aqui
    }
  });
});

Visualização

Imagine uma esteira em uma fábrica onde cada caixa simboliza um campo do formulário:

Esteira: 📦📦🔴📦📦 -> 🚚 (Enviando Formulário)

A caixa marcada em vermelho (🔴) não será enviada:

Antes: 📦📦🔴📦📦
Depois:  📦📦   📦📦 -> 🚚

A caixa marcada em vermelho representa o campo de entrada que não será submetido.

$('form').on('submit', function(){
   $(this).find('.não-enviar').prop('disabled', true);
});

Somente campos que não estão marcados para envio serão incluídos no formulário.

Analisando Mais a Fundo

Gestão Eficiente do Layout do Formulário

Use CSS para manter a aparência do formulário ao ocultar ou remover campos:

.input-hidden {
  visibility: hidden;
  position: absolute;
}

Garantindo Acessibilidade na Interface

Considere a acessibilidade dos formulários para que campos desabilitados interajam adequadamente com leitores de tela e não agravem a experiência do usuário.

Mantendo Scripts Personalizados

Ao utilizar scripts para modificar formulários, assegure-se de sua confiabilidade, facilidade de manutenção e realize testes em diversos ambientes.

Recursos Úteis

1. HTMLFormElement: submit event - Web APIs | MDN — Uma explicação detalhada sobre como interceptar eventos de envio de formulários com JavaScript.
2. preventDefault() Event Method — Como evitar o comportamento padrão do navegador (como o envio do formulário) utilizando o método preventDefault().
3. event.preventDefault() | Documentação da API jQuery — Explicação sobre o uso do método preventDefault() no jQuery para impedir o envio automático do formulário.
4. Como evitar o envio de formulário ao pressionar a tecla Enter - Stack Overflow — Métodos para evitar o envio acidental do formulário ao pressionar a tecla Enter.
5. A tag input em HTML — Visão geral de como a tag <input> funciona e suas capacidades na gestão de envios de formulários.
6. Validação de Formulário do Lado do Cliente - Tutorial de Desenvolvimento Web | MDN — Um guia sobre como implementar a validação de formulário do lado do cliente.
7. Diferença entre <input type='button' /> e <input type='submit' /> - Stack Overflow — A distinção entre um botão de envio de formulário e um botão comum.

Video

Navigation