Soumettre la valeur d'un champ de saisie désactivé

101

Je souhaite désactiver un champ de saisie, mais lorsque je soumets le formulaire, il doit toujours transmettre la valeur.

Cas d'utilisation: j'essaie d'obtenir la latitude et la longitude de Google Maps et je veux l'afficher, mais je ne veux pas que l'utilisateur le modifie.

Est-ce possible?

Harsha MV
la source

Réponses:

238

Je veux désactiver un champ de saisie sur un formulaire et lorsque je soumets le formulaire, les valeurs du formulaire désactivé ne sont pas soumises .

Cas d'utilisation: j'essaye d'obtenir Lat Lng de Google Map et je veux l'afficher .. mais je ne veux pas que l'utilisateur le modifie .

Vous pouvez utiliser la readonlypropriété dans votre champ de saisie

<input type="text" readonly="readonly" />
Sarfraz
la source
2
Notez que l'entrée pourra toujours recevoir le focus. Voir: stackoverflow.com/questions/5443952/…
Rafael Oliveira
5
Excellente réponse 8 ans plus tard. Je voulais juste ajouter que pour que le texte paraisse non modifiable, j'ajoute le css:input:read-only { color:grey; }
UltrasoundJelly
21

Je sais que c'est vieux, mais je viens de rencontrer ce problème et aucune des réponses ne convient. La solution de nickf fonctionne mais elle nécessite javascript. La meilleure façon est de désactiver le champ et de toujours transmettre la valeur consiste à utiliser un champ de saisie masqué pour transmettre la valeur au formulaire. Par exemple,

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

De cette façon, la valeur est transmise mais l'utilisateur voit le champ grisé. L'attribut readonly ne le grise pas.

Abu Sulaiman
la source
1
Vous pouvez ajouter du CSS sur les zones de texte désactivées pour les griser.
krillgar
Le valuenécessaire est-il en entrée désactivée?
Ömer An
10

vous pouvez également utiliser l'attribut Readonly: l'entrée ne sera pas grisée mais elle ne sera pas modifiable

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

Les éléments d'entrée ont une propriété appelée disabled. Lorsque le formulaire est soumis, exécutez simplement du code comme celui-ci:

var myInput = document.getElementById('myInput');
myInput.disabled = true;
nickf
la source
5
Pour répondre à la question d'origine, afin de transmettre la valeur lors de la soumission du formulaire, la propriété «désactivé» doit être «false» au lieu de «true».
Daniel Vukasovich