15.03.2025

Enviando Valores de Campos Desabilitados em Formulários Sem Input Oculto

Resposta Rápida

<input type="hidden" name="meuCampo" value="valorDesabilitado">

Para garantir que os valores dos campos desabilitados sejam enviados com a submissão do formulário, use campos ocultos. Transfira o valor do campo desabilitado para um campo oculto, nomeando-o para corresponder ao nome do atributo esperado no servidor.

Comportamento dos Navegadores e Soluções

Navegadores, como o Chrome, não incluem elementos desabilitados ao submeter formulários. Para garantir que seus valores sejam considerados durante a submissão, use o atributo readonly.

<input type="text" name="meuCampo" value="valorQueNãoPodeSerAlterado" readonly>

Campos com o atributo readonly não podem ser editados, mas ainda podem receber foco e enviar seus dados quando o formulário é submetido.

Contornando Limitações para Transferência de Dados Entre Campos

Se você precisa enviar dados de um campo enquanto impede sua edição, o atributo readonly é uma excelente solução. Você pode gerenciar campos em formulários dinâmicos usando JavaScript ou jQuery pouco antes da submissão.

$('form').submit(function() {
  $(this).find(':disabled').prop('disabled', false); // Dica: assegure-se de desabilitar esses campos novamente após a submissão.
});

Esse código ativa campos desabilitados pouco antes da submissão do formulário, garantindo sua inclusão nos dados do formulário.

Utilizando Capacidades do Servidor para Gerenciamento de Dados de Campos

Frameworks do lado servidor, como ASP.NET MVC com a sintaxe Razor, podem configurar formulários para que os dados de todos os campos sejam submetidos, independentemente de seu estado no lado do cliente.

@Html.HiddenFor(model => model.ValorInputDesabilitado); // Sintaxe Razor!

Clonando Dados de Campo Sem Ativá-lo

Em alguns casos, pode ser impossível ativar um campo desabilitado. Nesses casos, você pode copiar seus dados para um campo oculto antes da submissão do formulário. Veja uma função JavaScript que implementa esse processo:

function copiarParaCampoOculto(elementoInput) {
  var campoOculto = document.createElement('input');
  campoOculto.type = 'hidden';
  campoOculto.name = elementoInput.name; 
  campoOculto.value = elementoInput.value;
  form.appendChild(campoOculto);
}

Usar essa função para cada campo desabilitado garante que todos os dados dos campos sejam preservados.

Gerenciando o Processo de Submissão de Dados com AJAX

Se a submissão padrão do formulário não fornece controle completo, você pode considerar o uso de AJAX.

var dadosDoFormulario = new FormData();
dadosDoFormulario.append('meuCampo', $('#meuCampoDesabilitado').val());
$.ajax({
  url: 'submeterFormulario',
  type: 'POST',
  data: dadosDoFormulario,
  processData: false,
  contentType: false,
  success: function(resposta) {
    // 🎉 Sucesso!
  }
});

Usar AJAX permite incluir valores de campos desabilitados sem alterar a estrutura do formulário.

Visualização

Vamos visualizar uma banda musical como um formulário, onde cada membro representa um elemento de controle:

Membros da Banda: [Vocalista 🎤, Guitarrista 🎸, Baterista 🥁]

Suponha que o vocalista esteja doente e não possa se apresentar:

🎤 (Inativo), 🎸, 🥁

Durante a gravação da banda, a voz do vocalista está ausente:

Gravando 🎧: [🎸, 🥁]

Este problema é resolvido usando uma faixa oculta.

Gravando 🎧: [🎸, 🥁] + 🎤 (Faixa Oculta)
# A Banda Soa Completa!

Gerenciamento Eficaz com Script do Lado do Cliente

Um script do lado do cliente facilita de forma eficaz a consideração dos valores de campos desabilitados durante a submissão do formulário.

Considerando a Navegação por Abas

Para melhorar a navegação, use o atributo readonly com o evento de submissão usando JavaScript:

document.querySelector('form').addEventListener('submit', function(event) {
  var inputs = this.querySelectorAll('[readonly]');
  inputs.forEach(function(input) {
    input.removeAttribute('readonly');
  });
});

Garantindo a Integridade dos Dados

Assegure a integridade dos dados através da validação no lado do servidor, uma vez que os usuários podem apenas copiar valores de campos readonly.

Considerando Fatores de Acessibilidade

Elementos com o atributo readonly devem ser distinguíveis para todos os usuários, incluindo aqueles que usam software de leitura de tela.

Familiarização Detalhada com os Padrões HTML

Para uma compreensão mais profunda do assunto, recomendamos revisar as especificações HTML:

• HTML 4 explica a diferença entre readonly e disabled. Campos com o atributo readonly participam da navegação e submissão, ao contrário dos campos disabled.
• HTML 5 detalha o processo de assembléia de um conjunto de dados de formulário, revelando processos que incluem situações com campos readonly.

Recursos Úteis

1. Atributo disabled do HTML - Uma descrição detalhada do atributo disabled no MDN.
2. Especificação HTML - Padrão HTML oficial da WHATWG sobre o papel de elementos de formulário desabilitados.
3. Atributo disabled do Elemento Input - Um guia do W3Schools com exemplos de uso de disabled.
4. Acessibilidade de Botões Desabilitados | CSS-Tricks - Um artigo sobre a acessibilidade de elementos de controle de formulário que estão em estado desabilitado.
5. Como Submeter um Formulário Quando um Select Está Desabilitado? | Stack Overflow - Uma discussão no Stack Overflow sobre como garantir a submissão de campos desabilitados usando JavaScript.

Video

Navigation