Enviando o valor de um campo de entrada desativado

101

Eu quero desabilitar um campo de entrada, mas quando eu enviar o formulário ele ainda deve passar o valor.

Caso de uso: estou tentando obter a latitude e a longitude do Google Maps e quero exibi-las, mas não quero que o usuário as edite.

Isso é possível?

Harsha MV
fonte

Respostas:

238

Eu quero desabilitar um campo de entrada em um formulário e quando eu envio o formulário, os valores do formulário desabilitado não são enviados .

Caso de uso: estou tentando obter Lat Lng do Google Map e quero exibi-lo ... mas não quero que o usuário o edite .

Você pode usar a readonlypropriedade em seu campo de entrada

<input type="text" readonly="readonly" />
Sarfraz
fonte
2
Observe que a entrada ainda poderá receber o foco. Veja: stackoverflow.com/questions/5443952/…
Rafael Oliveira
5
Ótima resposta 8 anos depois. Só queria adicionar isso para fazer o texto parecer não editável, adicionei o css:input:read-only { color:grey; }
UltrasoundJelly
21

Eu sei que isso é antigo, mas acabei de encontrar esse problema e nenhuma das respostas é adequada. A solução do nickf funciona, mas requer javascript. A melhor maneira é desabilitar o campo e ainda passar o valor é usar um campo de entrada oculto para passar o valor para o formulário. Por exemplo,

<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />

Desta forma, o valor é passado, mas o usuário vê o campo esmaecido. O atributo somente leitura não o torna cinza.

Abu Sulaiman
fonte
1
Você pode adicionar CSS nas caixas de texto desabilitadas para desativá-las.
Krillgar
É valuenecessário na entrada desabilitada?
Ömer An
10

você também pode usar o atributo Readonly: a entrada não ficará esmaecida, mas não será editável

<input type="text" name="lat" value="22.2222" readonly="readonly" />
pjnovas
fonte
2

Os elementos de entrada têm uma propriedade chamada disabled. Quando o formulário for enviado, basta executar algum código como este:

var myInput = document.getElementById('myInput');
myInput.disabled = true;
nickf
fonte
5
Abordando a questão original, para passar o valor durante o envio do formulário a propriedade "disabled" deve ser "false" ao invés de "true".
Daniel Vukasovich