06.01.2025

Como Submeter Dados de Campos de Formulário Não Editáveis

Resposta Rápida

Para garantir que os dados de campos que não podem ser editados pelo usuário sejam submetidos, utilize o atributo readonly em vez de disabled. Os campos marcados com o atributo disabled não participam da submissão do formulário.

<input type="text" name="userData" value="Valor Fixo" readonly>

Lembre-se: Os dados dos campos com o atributo readonly são enviados, ao contrário dos dados dos campos com o atributo disabled. Um campo somente leitura pode ser estilizado com CSS para atender às suas necessidades.

Lidando com Caixas de Seleção e Botões de Rádio

Para submeter os valores de caixas de seleção e botões de rádio inativos, use campos ocultos. Assim, uma caixa de seleção ou botão de rádio disabled tem uma função visual, mas não interativa:

<input type="checkbox" disabled checked>
<input type="hidden" name="termosAceitos" value="true">

Dica: Este método permite manter a representação visual das caixas de seleção e botões de rádio, garantindo que seus valores sejam enviados.

Não-Interatividade dos Campos e CSS

Utilizando a propriedade CSS pointer-events: none, os elementos se tornam não interativos, mas sua aparência permanece inalterada:

.non-interactive-input {
  pointer-events: none;  /* O elemento não responde a ações do cursor */
  opacity: 0.6;          /* Semi-transparência indica não-interatividade */
}

Exemplo de uso da classe:

<input type="text" class="non-interactive-input" value="Sou inalcançável">

Benefício: O elemento mantém sua aparência enquanto se torna inacessível para interação, criando a ilusão de "somente leitura" sem afetar a submissão de dados.

Visualização

Está tendo dificuldades em entender o processo de submissão de dados de campos de formulário inativos? Pense nisso como uma esteira de armazém:

Esteira 🚚: Transporta caixas (dados do formulário) para um caminhão para envio posterior (processo de submissão do formulário).

• Caixas rotuladas (📦): Campos ativos do formulário que transmitem dados.
• Caixas não rotuladas (📦✖️): Campos inativos do formulário. Os dados destes não são enviados.
• Caminhão de entrega (🚛): Transporta apenas caixas rotuladas.

Se visualizarmos o processo na esteira:

• Caixas rotuladas (📦) → Caminhão de entrega 🚛
  Resultado: Dados das caixas rotuladas são submetidos! 📬

• Caixas não rotuladas (📦✖️) → Caminhão de entrega 🚛
  Resultado: Dados das caixas não rotuladas não são submetidos. ❌

Conclusão: A submissão só é possível para as caixas rotuladas. No nosso caso, o rótulo indica o estado ativo de um campo, permitindo a transmissão de dados.

Distinção Visual para Campos Inativos e "Somente Leitura"

Para distinguir visualmente os campos inativos e "somente leitura" dos campos de entrada normais, utilize estilos CSS:

.read-only {
  background-color: #e9ecef;   /* Cor de fundo característica de "somente leitura" */
  color: #495057;              /* Cor do texto representando o modo "somente leitura" */
}

Exemplo de uso da classe:

<input type="text" class="read-only" readonly value="Campo Somente Leitura">

Melhor Prática: Destacar visualmente os campos inativos e "somente leitura" ajuda os usuários a navegar pela interface.

jQuery para Lidar com Cenários Complexos

Para gerenciar cenários mais complexos, utilize jQuery. Aqui está um exemplo de um script que ativa campos inativos antes da submissão do formulário:

$('form').submit(function() {
  $(this).find(':disabled').removeAttr('disabled'); /* Os campos se tornam ativos antes da submissão */
});

Nota: Este código ativa os campos imediatamente antes da submissão do formulário, garantindo a integridade dos dados no lado do cliente.

Lidando com Elementos de Formulário Dinâmicos

Formulários dinâmicos complexos ou interfaces de usuário podem exigir o uso de JavaScript ou jQuery para lidar com campos inativos antes da submissão. Nesses casos, você pode serializar os dados ou armazená-los em variáveis para anexar aos dados principais do formulário ou em uma requisição AJAX:

var dadosDesativados = {};
$(':disabled').each(function() {
  dadosDesativados[this.name] = $(this).val(); /* Coleta dados dos campos não ativos */
});

Dessa forma, os dados dos campos inativos serão incluídos na submissão.

Video

Navigation