FAQ JavaScriptConsultez toutes les FAQ

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é.

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é

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.

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);

Il n'est pas possible de le faire directement en attribuant une valeur à -1 à l'objet select. Malheureusement, cela ne fonctionne pas... Une autre idée serait d'itérer sur tous les éléments du select pour les désélectionner :

for(var i = 0; i < oSelect.length; i++){
    oSelect.options[i].selected = false;
}

Cette solution fonctionne, mais n'est pas optimale car l'itération se fait aussi sur les options non sélectionnées et le traitement n'est pas optimisé. On peut alors penser à ne faire l'itération que sur les options sélectionnées à l'aide d'une boucle while et de la propriété selectedIndex qui retourne l'index de la première option sélectionnée ou -1 si aucune option ne l'est.

function deselect(oSelect){
    while(oSelect.selectedIndex > -1){
        oSelect.options[oSelect.selectedIndex].selected = false;
    }
}

Cette façon de procéder est efficace et produit le résultat attendu, cependant, selectedIndex est une propriété de type read / write, ce qui signifie que l'on peut lui affecter une valeur. La solution la plus efficace sera donc d'affecter à selectedIndex la valeur -1 pour désélectionner toutes les options :

function deselect(oSelect){
    oSelect.selectedIndex = -1;
}

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
}

Il suffit d'utiliser la propriété value . Ainsi, il suffit de faire :

document.getElementById('idduchamp').value

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).

Il suffit de rajouter un attribut onfocus au champ texte:

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

Il suffit de rajouter un attribut onfocus au champ texte:

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

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

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);