Skip to content. Skip to navigation
You are here: Home Base de connaissances Les règles d'accessibilité Les règles d'accessibilité classées par thème, selon WCAG 1.0 Exemple de formulaire avec gestion des erreurs

Exemple de formulaire avec gestion des erreurs

by Jean-Marie D'Amour last modified 2008-02-08 16:08

Télécharger : Exemple de formulaire avec gestion des erreurs

Size 2.6 kB - File type text/html

File contents

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mise à jour d'un formulaire en javascript</title>

<script type="text/javascript">
var countryLists = new Array();
countryLists["vide"] = ["Choisir un pays"];
countryLists["Amérique du Nord"] = ["Canada", "États-Unis", "Mexique"];
countryLists["Amérique du Sud"] = ["Brésil", "Argentine", "Chili", "Équateur"];
countryLists["Asie"] = ["Russie", "Chine", "Japon"];
countryLists["Europe"]= ["Grande-Bretagne", "France", "Espagne", "Allemagne"];
/* CountryChange() est appelé par le onchange d'une zone de liste déroulante.
* param selectObj - la zone de liste déroulante qui initie le changement.
*/
function countryChange(selectObj)
{
	// obtenir l'index de l'option sélectionnée
	var idx = selectObj.selectedIndex;
	// obtenir la valeur de l'option sélectionnée   
	var which = selectObj.options[idx].value;
	// utiliser la valeur de l'option sélectionnée pour récupérer la liste des items
	// du tableau des pays
	cList = countryLists[which];
	// obtenir l'élément du choix de menu via son identifiant connu
	var cSelect = document.getElementById("id_country");
	// enlever les items actuels de la sélection de pays
	var len=cSelect.options.length;   
	
	while (cSelect.options.length > 0) 
	{   
		cSelect.remove(0);   
	}   
	
	var newOption;   
	var letexte = "";
	var lavalue = 0;
	
	// créer les nouveaux items   
	for (var i=0; i < cList.length ; i++) 
	{   
		newOption = document.createElement("option");   
		letexte = document.createTextNode(cList[i]);
		newOption.appendChild(letexte);
		newOption.setAttribute("value",cList[i]);

		cSelect.appendChild(newOption); 
	}   
}
</script>

</head>

<body>
<h1>Zones de listes déroulantes dynamiques</h1>
  <form action="#"> 
  <p>
  <label for="id_continent">Choisir un continent</label>   
    <select name="sl_continent" id="id_continent" onchange="countryChange(this);">     
      <option value="vide">Choisir un continent</option>     
      <option value="Amérique du Nord">Amérique du Nord</option>
      <option value="Amérique du Sud">Amérique du Sud</option>
      <option value="Asie">Asie</option>     
      <option value="Europe">Europe</option>   
    </select>   
</p>
<p>   
  <label for="id_country">Choisir un pays</label>   
    <select name="sl_country" id="id_country">     
      <option value="0">Choisir un pays</option>   
    </select>
	</p>
    </form>
</body>
</html>