logo
Sommaire > Formulaires HTML et autres objets > Les formulaires > Les champs des formulaires
        Comment récupérer la valeur d'un select ?
        Comment récupérer le texte d'un select ?
        Comment modifier l'état d'une des options d'un select ?
        Comment récupérer les valeurs d'un select multiple ?
        Comment récupérer l'état de cases à cocher ?
        Comment récupérer la valeur d'un champs texte ?
        Comment modifier la valeur d'un input de type file ?
        Comment vider un champ texte quand on clique dessus ?
        Comment sélectionner le contenu d'un champ texte quand on clique dessus ?
        Comment modifier les options d'un champ select ?
        Comment attribuer une valeur à l'attribut name d'un élément créé par un script ?



Comment récupérer la valeur d'un select ?
auteur : simone.51
Ce code est utile pour récupérer la valeur d'un select lorsque l'internaute clique dessus par exemple.

document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value
Explications :
document.getElementById('liste') --> permet de désigner la liste en question
La propriété options permet de désigner une des valeurs de la liste déroulante. Il s'agit d'un tableau.
Ainsi, pour désigner le premier élément de la liste, il suffit de faire :

document.getElementById('liste').options[0]
document.getElementById('liste').selectedIndex --> permet de désigner l'élément sélectionné.


Comment récupérer le texte d'un select ?
auteur : simone.51
Ce code est utile pour récupérer le texte d'un select lorsque l'internaute clique dessus par exemple.

document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text
Explications :
document.getElementById('liste') --> permet de désigner la liste en question
La propriété options permet de désigner une des valeurs de la liste déroulante. Il s'agit d'un tableau.
Ainsi, pour désigner le premier élément de la liste, il suffit de faire :
document.getElementById('liste').options[0]
document.getElementById('liste').selectedIndex --> permet de désigner l'élément sélectionné


Comment modifier l'état d'une des options d'un select ?
auteur : denisC
Pour modifier l'élément sélectionné dans un select, il suffit de changer l'attribut selected des éléments:

document.forms[0].monSelect.options[i].selected = true; // ou false
Dans le cas d'un select normal, si une option est passée à true, elle deviendra automatiquement l'option sélectionnée. Pour un select multiple, cette option se rajoutera aux options déjà sélectionnées.


Comment récupérer les valeurs d'un select multiple ?
auteur : denisC
Pour récupérer les valeurs sélectionnées dans un select multiple, il faut parcourir l'ensemble des options de ce select (comme pour des checkbox).

var selectedList = new Array();
var selectBox = document.forms[0].monSelect;
for (var i=0; i<selectBox.options.length; i++) {
  if (selectBox.options[i].selected) {
    selectedList.push(selectBox.options[i]);
  }
}
var alertTxt = "";
for (opt in selectedList) {
alertTxt += "L'option "+opt.value+" est selectionnée \n";
}
alert(alertTxt);

Comment récupérer l'état de cases à cocher ?
auteur : simone.51
Cette fonction ne marche que si les cases à cocher possèdent le même nom.
for (i=0; i<document.nomduform.nomdescases.length; i++) {
    if (document.nomduform.nomdescases[i].checked)
      // cochée
   else
      // pas cochée
}

Comment récupérer la valeur d'un champs texte ?
auteur : BrYs
Il suffit d'utiliser la propriété value . Ainsi, il suffit de faire :
document.getElementById('idduchamp').value

Comment modifier la valeur d'un input de type file ?
auteur : Jérôme
Pour des raisons de sécurité, il n'est pas possible de modifier la valeur d'un champ de formulaire de type file. En effet, sa propriété value est en lecture seule. Si ce n'était pas le cas, il serait donc possible de donner une valeur par défaut à ce champ, et pourquoi pas un fichier sensible du système d'exploitation de l'utilisateur, puis de faire envoyer ce fichier via un formulaire invisible qui s'envoie tout seul (grâce à JavaScript).


Comment vider un champ texte quand on clique dessus ?
auteur : denisC
Il suffit de rajouter un attribut onfocus au champ texte:

<input type="text" name="nom_de_mon_input" onfocus="this.value='';"/>

Comment sélectionner le contenu d'un champ texte quand on clique dessus ?
auteur : denisC
Il suffit de rajouter un attribut onfocus au champ texte:

<input type="text" name="nom_de_mon_input" onfocus="this.select();"/>

Comment modifier les options d'un champ select ?
auteur : BrYs
La méthode suivante permet de mettre à jour un select désigné par son idSelect:

/**
* Remplace le contenu du select désigné par la liste présente dans data.
* @param idSelect identifiant du select à modifier
* @param data liste associative (clé/valeur) des values et textes des options à créer
* @param selectedKey la clé selectionnée
*/
function updateComboBox (idSelect,data,selectedKey) {
var monSelect = document.getElementById(idSelect);
monSelect.options.length = 0;
var selected;
var i=0;
for (var key in data) {
// permet de choisir le champ à definir par défaut
if (selectedKey == key) {
selected = i;
}
monSelect.options[monSelect.length] = new Option(data[key],key);
i++;
}
//permet de positionner la combo au bon champs
monSelect.selectedIndex = selected;
}
  • idSelect est l'identifiant unique du select à mettre à jour
  • data est une liste associative des valeurs / textes des options à ajouter
  • selectedKey est la value de l'option actuellement sélectionnée
lien : Exemple d'utilisation de ce script

Comment attribuer une valeur à l'attribut name d'un élément créé par un script ?
auteurs : Auteur, SpaceFrog
Pour créer un élément HTML, nous utilisons cette syntaxe (par exemple pour créer un input) :

var monInput;
 
// création de l'input
monInput = document.createElement("input");
monInput.type = "text";  
monInput.name = "nameInput"; 
 
monInput.id = "idInput";
monInput.value = "";
 
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput);
Par la suite, si vous faites :

alert(document.getElementById("idInput").name);
Firefox retournera nameInput tandis que IE ne retournera rien.
Pire, si vous soumettez le formulaire, IE ne transmettra pas cet input !

Pour pallier à ce problème la syntaxe suivante a été proposée :

monInput = document.createElement("<input name='nameInput'>");
//... suite du code
Dans ce cas sous IE un

document.getElementById("idInput").name
retournera bien nameInput.
Mais cette syntaxe ne fonctionne qu'avec IE et lève une exception (erreur) avec la plupart des navigateurs.
Voici donc deux manières de contourner le problème :

if (document.all){  // pour IE
monInput = document.createElement("<input name='nameInput'>");
}
else{ // pour FF et autres navigateurs
monInput = document.createElement("input");
monInput.name = "nameInput";
}
 
// suite du code :
monInput.type = "text"; 
monInput.id = "idInput";
monInput.value = "";
 
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput);
2ème exemple : gérer l'exception levée :

try{
// si une exception est levée, le contenu du catch est exécuté
monInput = document.createElement("<input name='nameInput'>");
}
catch(erreur){
monInput = document.createElement("input");
monInput.name = "nameInput"; 
}
 
// suite du code :
monInput.type = "text"; 
monInput.id = "idInput";
monInput.value = "";
 
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput);
lien : Discussion en rapport avec cette question


Consultez les autres F.A.Q's


Valid XHTML 1.0 TransitionalValid CSS!

Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. Le PDG de Sun démissionne, "Crise financière / Clientèle en chute libre / Plus de PDG", écrit-il sur son Twitter Commentaires 342
  2. Firefox 3.6 dans les starting-blocks, le navigateur arrive dans une version définitive beaucoup plus rapide Commentaires 73
  3. Il y aura un Firefox 3.6.5 mais peut-être pas de 3.7, explique Mozilla ; la nouvelle est tout sauf anodine Commentaires 73
  4. Internet Explorer patché aujourd'hui, les téléchargements de Firefox et d'Opera s'envolent Commentaires 116
  5. Quelle police de caractères préférez-vous pour développer ? Est-elle dans notre Top 10 ? Commentaires 75
  6. Exclusif : "Google a raison, il est plus facile de développer une extension pour Chrome", suite de l'entretien avec Mozilla (partie 3) Commentaires 78
  7. Programmation GWT 2 - Développer des applications RIA et Ajax avec GWT, de Sami Jaber, critique par benwit Commentaires 8
  8. CoffeeScript propose une nouvelle syntaxe pour JavaScript, l'actuelle viendrait de Java et ne serait plus adaptée au langage Commentaires 7
  9. Sortie de jQuery 1.4 et lancement des 14 jours de jQuery Commentaires 10
  10. Tutoriel JavaScript : Créer une fonctionnalité drag and drop, par Peter-Paul Koch Commentaires 0
  11. Page suivante
  1. Le PDG de Sun démissionne, "Crise financière / Clientèle en chute libre / Plus de PDG", écrit-il sur son Twitter Commentaires 339
  2. Le pire bout de code que vous ayez vu : Qui l'a fait ? Pourquoi ? Pourquoi était-il si horrible ? Commentaires 311
  3. Navigateurs : Mozilla lance Firefox 3.5.3 qui corrige différents problèmes de sécurité et de stabilité du logiciel Commentaires 83
  4. Navigateurs : Mozilla Firefox 3.5 apprécié des Français, déjà 307.000 téléchargements en 48H Commentaires 83
  5. Navigateurs : Mozilla lance Firefox 3.5.2 Commentaires 83
  6. EDI : NetBeans 6.8 disponible en version finale. Que pensez-vous de cette version ? Commentaires 75
  7. Firefox 3.6b2 est disponible, elle corrige 190 bugs de la bêta 1 mais la question de sa vitesse demeure Commentaires 73
  8. Firefox 3.6 dans les starting-blocks, le navigateur arrive dans une version définitive beaucoup plus rapide Commentaires 73
  9. Navigateurs : Firefox 3.6 est disponible en Beta 4 près de 140 bugs sont corrigés. Commentaires 73
  10. La bêta 3 de Firefox 3.6 est disponible. 80 bugs corrigés et 2 nouveautés au programme de cette mise à jour Commentaires 73
  11. Page suivante

Les meilleures ressources

Communauté

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2004 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.