Exemple de formulaire avec gestion des erreurs
Télécharger : Exemple de formulaire avec gestion des erreurs
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>
