16.03.2025

Enviando Valor de um Campo de Entrada Desativado em um Formulário

Método Rápido

Para enviar o valor de um campo desativado, utilize um campo oculto. Durante a submissão do formulário, campos desativados não são considerados, ao contrário dos campos ocultos.

<input type="hidden" name="userCopy" value="ValorCopiado">

document.myForm.onsubmit = () => {
  document.querySelector('[type="hidden"]').value = document.querySelector('[disabled]').value; // Usando um truque
};

Usando 'readonly'

Se você precisa fixar dados, como os vindos do Google Maps, utilize o atributo readonly. Os valores serão exibidos na tela, mas não poderão ser alterados. Enquanto isso, os dados serão enviados com sucesso junto ao formulário. Esqueça métodos complicados!

<input type="text" name="location" value="CoordenadasObtidas" readonly>

Visualizando o Processo de Transferência de Dados

Submeter um formulário é como uma corrida de revezamento. Se um campo de entrada desativado ficar para trás, não chegará à linha de chegada:

🏃‍♂️(campo de entrada ativo) → 🏃‍♂️(campo de entrada desativado - segurando o bastão 🏆) → 🎽(Linha de chegada - Submissão do Formulário)

Mas se acrescentarmos um participante oculto, o revezamento cruzará a linha de chegada suavemente. Parece mágica, não é?

🏃‍♂️(campo de entrada ativo) ✋🤫🤝🏃‍♂️(campo oculto com o mesmo valor 🏆) → 🎽(Linha de chegada - Submissão do Formulário)

E os espectadores aplaudem ao ver os dados atingirem seu objetivo. 📤🎉

Assim, temos:

• Campo desativado: ❌ Valor não será enviado junto com o formulário.
• Campo readonly: ✅ Valor será enviado, mas não pode ser editado.
• Campo oculto: ✅ Valor será enviado, sem ser notado.

Organizando Formulários com Campos Readonly e Ocultos

Escolha entre readonly e hidden com base nos seus requisitos. Se precisar exibir dados sem a possibilidade de editá-los, utilize readonly. Se os dados não devem ser exibidos para o usuário, use campos ocultos.

Vamos nos divertir com JS criando campos readonly com coordenadas:

function updateLocationFields(lat, lng) {
  const latField = document.getElementById('latitude');
  const lngField = document.getElementById('longitude');
  latField.value = lat; // Definindo a latitude
  lngField.value = lng; // Definindo a longitude
  latField.readOnly = true; // Novas alterações não serão aceitas
  lngField.readOnly = true; // Não é possível voltar
}

Aqui está como esconder dados da visualização do usuário:

<input type="hidden" id="secretSauce" name="invisibleCode" value="ReceitaOculta">

Sincronizando Campos Readonly e Ocultos

Para exibir corretamente e submeter dados ocultos do formulário, é essencial sincronizar campos readonly e ocultos. O usuário vê apenas os campos readonly, enquanto o campo oculto faz todo o trabalho "nos bastidores".

Exemplo de uma "operação oculta" coordenada:

function syncFields() {
  document.getElementById('hiddenLatitude').value = document.getElementById('readonlyLatitude').value; // Transferência oculta
  document.getElementById('hiddenLongitude').value = document.getElementById('readonlyLongitude').value; // Transferência sutil
}

Bloqueando Campos de Entrada Durante a Submissão do Formulário

Congelar a entrada de dados via JavaScript no momento da submissão do formulário para evitar alterações subsequentes. Esse método é especialmente adequado para formulários de múltiplas etapas.

Exemplo de congelamento de campos de entrada:

document.myForm.onsubmit = () => {
  const inputs = document.querySelectorAll('.campo-especifico-etapa');
  inputs.forEach(input => input.disabled = true); // Todas as operações estão paralisadas
};

Recursos Úteis

1. Atributo HTML: disabled — HTML: HyperText Markup Language | MDN — MDN, sempre uma fonte confiável de informação.
2. Atributo disabled do elemento de entrada HTML — W3 Schools revela as nuances do uso.
3. Padrão HTML — Mergulhe nos mistérios dos formulários HTML!
4. Validação de Formulários HTML5 — SitePoint — HTML5 torna os formulários mais confiáveis e seguros.
5. Aprendendo Formulários | web.dev — Aprenda tudo sobre como gerenciar formulários na era do HTML5.
6. .prop() | jQuery API Documentation — Gerencie atributos como um profissional (como se você estivesse solando guitarra).
7. cross browser - Qual é a diferença entre disabled="disabled" e readonly="readonly" para campos de entrada de formulários HTML? - Stack Overflow — Mergulhe nas profundezas das discussões no Stack Overflow.

Conclusão

A prática leva à perfeição ao trabalhar com formulários. Se você achou este artigo útil, adoraria ver seu feedback. Boas codificações! 👩‍💻

Video

Navigation