IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ JavaScript

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 29 août 2021 

 
OuvrirSommaireLes formulairesLes champs des formulaires

Ce code est utile pour récupérer la valeur d'un select lorsque, par exemple, l'internaute clique dessus.

 
Sélectionnez
document.getElementById('liste').value;

Ce code est valable uniquement si l'attribut multiple de la balise select est absent. Et il faut préciser l'attribut value dans les balises option. Dans le cas contraire, le résultat dépend du navigateur. Certains navigateurs affichent alors le texte contenu entre les balises ouvrantes et fermantes des option.

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 (il possède donc toutes les propriétés d'un tableau JavaScript). Ainsi, pour désigner le premier élément de la liste, il suffit de faire :

 
Sélectionnez
document.getElementById('liste').options[0]

Pour connaître le nombre d'éléments d'une liste :

 
Sélectionnez
document.getElementById("liste").options.length;

document.getElementById('liste').selectedIndex permet de désigner l'élément sélectionné.

Mis à jour le 6 décembre 2013  par simone.51, Bovino, Auteur, vermine

Lien : Comment récupérer les valeurs d'un select multiple ?

Ce code est utile pour, par exemple, récupérer le texte de l'option choisie par l'internaute dans une liste déroulante select.

 
Sélectionnez
var texte;
texte = document.getElementById("liste").options[document.getElementById('liste').selectedIndex].text;

Pour éviter la répétition du document.getElementById("liste"), on peut écrire :

 
Sélectionnez
var liste, texte;
liste = document.getElementById("liste");
texte = liste.options[liste.selectedIndex].text;

Ne pas confondre text et value de l'option : la propriété text désigne le contenu qui se situe entre deux balises option tandis que value désigne la valeur de l'attribut value de cette même balise option.

Mis à jour le 6 décembre 2013  par simone.51, Auteur

Lien : Comment récupérer la valeur d'un select ?

Pour modifier l'élément sélectionné dans un select, il suffit de modifier l'attribut selected de l'élément :

 
Sélectionnez
document.getElementById("liste").options[i].selected = true; // ou false

i est l'index de l'option dont on veut modifier le statut.

Dans le cas d'un select unique, 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.

Mis à jour le 6 décembre 2013  par denisC, Auteur, NoSmoking

La méthode suivante permet de mettre à jour un select désigné par son idSelect :

 
Sélectionnez
/**
* 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é sélectionnée
*/
function updateComboBox(idSelect, data, selectedKey) 
{
	var monSelect = document.getElementById(idSelect);
	var selected;
	var i=0;
	monSelect.options.length = 0;
 
	for (var key in data) 
	{
		// permet de choisir le champ à définir par défaut
		if (selectedKey == key) 
		{
			selected = i;
		}
 
		monSelect.options[monSelect.length] = new Option(data[key],key);
		i++;
	}
	//permet de positionner la combo sur le bon champ
	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 valeur de l'option actuellement sélectionnée.
Mis à jour le 6 décembre 2013  par BrYs, Auteur

Lien : Exemple d'utilisation de ce script

Pour récupérer les valeurs sélectionnées dans un select multiple, il faut parcourir l'ensemble des options de ce select.

 
Sélectionnez
var selectedList = [],
    selectBox = document.getElementById("liste"),
    i;
 
for (i=0; i < selectBox.options.length; i++) 
{
	if (selectBox.options[i].selected) 
	{
		selectedList.push(selectBox.options[i]);
	}
}

La collection des options est incluse dans l'objet liste retourné par getElementById(), on peut donc simplifier légèrement le code :

 
Sélectionnez
var selectedList = [],
    selectBox = document.getElementById("liste"),
    i;
 
for (i=0; i < selectBox.length; i++) 
{
	if (selectBox[i].selected) 
	{
		selectedList.push(selectBox[i]);
	}
}
Mis à jour le 6 décembre 2013  par denisC, Auteur, NoSmoking

Lien : Comment désélectionner tous les éléments d'un select multiple ?

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 :

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

 
Sélectionnez
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 :

 
Sélectionnez
function deselect(oSelect){
    oSelect.selectedIndex = -1;
}
Créé le 1er octobre 2012  par Bovino

Lien : Exemple d'utilisation de ce script
Lien : Comment récupérer les valeurs d'un select multiple ?

Pour vérifier l'état des cases à cocher (chexbox), il faut rechercher ces éléments dans le formulaire puis, s'ils sont présents, les analyser un à un :

 
Sélectionnez
var formulaire = document.getElementById("idFormulaire"); // ciblage du formulaire
var inputForm = formulaire.getElementsByTagName("input"); // récupération de TOUS les éléments de type input du formulaire
var n;
 
n = inputForm.length;
for (i=0; i<n; i++)
{
	if (inputForm[i].type.toLowerCase()=="checkbox") // si c'est une case à cocher
	{
		if (inputForm[i].checked) // case cochée
		{
			alert(i + " est cochée");
		}
		else // sinon
		{
			alert(i + " n'est pas cochée");
		}
	}
}
Mis à jour le 6 décembre 2013  par simone.51, Auteur, NoSmoking

Lien : Au sujet de querySelectorAll

Il suffit d'utiliser la propriété value :

 
Sélectionnez
document.getElementById('idduchamp').value
Créé le 23 septembre 2004  par BrYs

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

Créé le 23 septembre 2004  par Jérôme

Il suffit d'ajouter un attribut onfocus au champ texte :

 
Sélectionnez
<input type="text" name="nom_de_mon_input" id="id_de_mon_input" value="Valeur de l'input" onfocus="this.value=''" />
Mis à jour le 6 décembre 2013  par denisC, Auteur

Il suffit d'ajouter un attribut onfocus au champ texte :

 
Sélectionnez
<input type="text" name="nom_de_mon_input" id="id_de_mon_input" value="Valeur de l'input" onfocus="this.select()" />
Mis à jour le 6 décembre 2013  par denisC, NoSmoking

Pour créer un élément HTML (par exemple un input), nous utilisons la syntaxe suivante. Ce code fonctionne à partir de IE8 et sur les autres navigateurs :

 
Sélectionnez
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);

Pour récupérer l'attribut name, vous pouvez faire :

 
Sélectionnez
alert(document.getElementById("idInput").name);

Vous obtiendrez : nameInput.

Pour les versions d'Internet Explorer antérieures à IE8, il faut intégrer l'attribut name dans la méthode createElement(). Pour plus de détails, voir le paragraphe [Obsolète] de cette Q/R.


[Obsolète]
Pour pallier au problème des versions antérieures à IE8, la syntaxe suivante a été proposée :

 
Sélectionnez
monInput = document.createElement("<input name='nameInput'>");
//... suite du code

Dans ce cas, vous pouvez faire :

 
Sélectionnez
document.getElementById("idInput").name

Et cela 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 :

 
Sélectionnez
if (document.all){  // pour IE7 et -
	monInput = document.createElement("<input name='nameInput'>");
}
else{ // pour les 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);

Le second exemple gère l'exception levée :

 
Sélectionnez
try{ // pour IE7 et -
	// si une exception est levée, le contenu du catch est exécuté
	monInput = document.createElement("<input name='nameInput'>");
}
catch(erreur){ // pour les 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);
Mis à jour le 6 décembre 2013  par Auteur, SpaceFrog, NoSmoking, vermine

Lien : Discussion en rapport avec cette question

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 œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.