renseigner un champs texte d'apres un select

**asmar** · 05/01/2010, 16h11

bjr jai un probleme dans un code javascript voila la question:Ecrivez un script javascript comprenant une liste déroulante et un champs de texte. La liste
déroulante sera composée de nom de pays. Quand on sélectionnera un pays de la liste, la capitale s’affichera dans le champs de texte.et voila le code que j'ai mi mais ça donne rien et je comprend pa pourquoi .svp aidez moi et merci d'avance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
<!--
function capitale(form1){
if (form1.list.(selectedIndex+1)=1);
form1.txtCapitale.value="Rabat";
else
if (form1.list.(selectedIndex+1)=2);
form1.txtCapitale.value="Paris";
else
if (form1.list.selectedIndex(selectedIndex+1)=3);
form1.txtCapitale.value="Rome";
else
if (form1.list.selectedIndex(selectedIndex+1)=4);
form1.txtCapitale.value="Madrid";
}
//-->
</script>
</head>
<body>
 <form name="form1">
  <select name="list" onchange="capitale(form1)">
  <option value="1">Maroc</option>
  <option value="2">France</option>
  <option value="3">Italie</option>
  <option value="4">Espagne</option>
  </select>
  <br>
  <input type="text" name="txtCapitale">
 
 </form>
 
 </body>
 
</html>

**SpaceFrog** · 05/01/2010, 16h25

Le switch est tout a fait indiqué pour ces cas de figure

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
<!--
function capitale(sel){
var capitale=""
switch (sel) {
 case "1" : capitale= "Rabat"
            break;
 case "2" : capitale= "Paris"
            break;
 case "3" : capitale= "Rome"
            break;
 case "4" : capitale= "Madrid"
            break;
 default:   capital="";}
 document.getElementsByName("txtCapitale")[0].value=capitale;}
 
 
 
 
//-->
</script>
</head>
<body>
 <form name="form1">
  <select name="list" onchange="capitale(this.value)">
  <option value="-1">selectionnez le pays</option>
  <option value="1">Maroc</option>
  <option value="2">France</option>
  <option value="3">Italie</option>
  <option value="4">Espagne</option>
  </select>
  <br>
  <input type="text" name="txtCapitale">
 
 </form>
 
 </body>
 
</html>

**kernelfailure** · 05/01/2010, 18h43

A ce stade, un tableau (associatif ou non) serait aussi bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function capitale(sel) {
if (sel < 0) return;
var caps = ['',"Rabat","Paris","Rome","Madrid"];
document.getElementsByName("txtCapitale")[0].value=caps[parseInt(sel)]
}

Pour les values :
Pourquoi ne pas avoir commencé à 'zéro' ?
Pourquoi ne pas mettre directement le nom des capitales en value des options ?

**Bovino** · 05/01/2010, 19h40

Mouais... il y a plus simple selon moi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
<!--
function capitale(valeur){
document.getElementById('resultat').value = valeur == '0' ? '' : valeur;
}
//-->
</script>
</head>
<body>
 <form name="form1">
  <select name="list" onchange="capitale(this.value)">
  <option value="0">Voir la capitale</option>
  <option value="Rabat">Maroc</option>
  <option value="Paris">France</option>
  <option value="Rome">Italie</option>
  <option value="Madrid">Espagne</option>
  </select>
  <br>
  <input type="text" name="txtCapitale" id="resultat" />
 
 </form>
 
 </body>
 
</html>

**kernelfailure** · 05/01/2010, 22h37

Bah oui.
Et mettre le code direct dans le onchange tant qu'à faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<select name="list" onchange="document.getElementById('resultat').value = this.value">
<option value="">Voir la capitale</option>
<option value="Rabat">Maroc</option>
etc...

**SpaceFrog** · 06/01/2010, 09h17

je préfère toute fois rester sur le switch principalement pour deux raisons:
* on peut avoir besoin du value pour autre chose et donc ça le monopolise avec le nom de la capitale
* je trouve et ce n'est qu'un avis personnel plus facile de mettre à jour un switch qu'un array dans la version array

sinon niveau optimisation il est clair que ce n'est pas la meilleure solution. Je suis dans l'optique maintenance.

**asmar** · 07/01/2010, 09h40

merci a vous tous .Mais je comprend pas bcp de choses parce ke moi je suis encore debutante en javascript .
Pour Mr SpaceFrog votre solution marche tres bien mais je comprend pas pourquoi vs n'avez pas utilisé le if comme je l'ai fait moi ,meme avec if ça peut donné un resultat nn??pour le switch je connaisssai pas mais maintenenat grace a vous je connais et jai fait des recherches sur net et je lai bien compris ,juste ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName("txtCapitale")[0].value=capitale;}

,je lai pas compri ,est ce qu'on peut pas mettre a sa place

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

form1.txtCapitale.value=capitale

.
Pour Mr kernelfailure moi je sais pas trop repondre a vos questions mais bon votre solution je l'ai pas compri ,est ce que vs pouvez m'eclairez un peu .

Pour Mr Bovino votre solution marche mais je compren pa cette ligne:document.getElementById('resultat').value = valeur == '0' ? '' : valeur;
et je comprend pas pourkoi vous donnez a la fonction capitale le parametre this.value???

**SpaceFrog** · 07/01/2010, 09h45

concernant ma syntaxe et l'utilisation du switch au lieu du if ...

Oui tu peux utiliser le if ... c'est juste plus lourd ...

pour la syntyaxe, j'utilise une syntaxe sûre qui ne posera pas de problème selon le navigateur.
Tu peux utiliser ta syntaxe raccourcie qui fonctionne bien sous IE masi peut poser des soucis de conflit de variable dasn cerains cas et n epasse pas sur certains navigateurs ...

**kernelfailure** · 07/01/2010, 12h20

Pourquoi ne pas avoir commencé à 'zéro' ?
Tu commences tes values d'option à "1", tu aurais pu tout simplement commencer par "0".

Pourquoi ne pas mettre directement le nom des capitales en value des options ?
Comme Bovino l'a proposé, on peut tout aussi bien mettre le nom des capitales en value.

Solution #1
Je transforme tes chiffres (sel) en indice de tableau (parseInt(sel)).
Les noms des capitales ont été regroupé dans un tableau (Array) auquel j'accède en utilisant l'indice.

Solution #2
Ici les values sont directement les noms des capitales. Quand une modification de la sélection survient, on va affecté "resultat" immédiatement avec le choix de l'utilisateur.

Ici, deux manières d'accès aux objets du document :
par DOM (document.getElement... si un 's' à element, c'est une liste {NodeList}),
ou par les Objets Javascript (document.form1... équivalent à document.forms['form1']...).

Le "switch case default" sert à clarifier les structures de type "if else if else". Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var i = 2;
switch(true) {
  case (i==0): alert('0'); break;
  case (i==1): alert('1'); break;
  default: alert("i est inconnu : " + i)
}
 
var i = 1;
var j = 2;
switch(i && j) {
  case (0 && 1): alert('0'); break;
  case (1 && 2): alert('1'); break;
  default: alert("i et j sont inconnu : " + i + ' ' + j)
}

renseigner un champs texte d'apres un select

JavaScript

Discussions similaires

Partager

Partager