Discussion :

[theophile76]

Bonjour,
voilà je suis débutant et en train de créer un site.
Je bloque à un endroit :

En fait j'ai 3 "Select" avec un "Submit" à la fin comme ceci :

Code html :

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
<form> 
 
<select name="choix1"> 
<option>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
 
<select name="choix2"> 
<option>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
 
<select name="choix3"> 
<option>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
 
<INPUT type="submit" value="Ok"> 
 
</form>

Et voudrais que selon le choix qu'on a fait dans chacun des 3 "select", on arrive sur le lien approprier quand on clique sur le bouton.

Exemple :

• Dans le "choix1", je choisit A
• Dans le "choix2", je choisit B
• Dans le "choix3", je choisit A

-> quand j’appuie sur le bouton "Submit", j'arrive sur le la page "A-B-A.html"

De plus j'aurais aimer pouvoir rendre certaine "Option" en mode "Désactiver" selon le choix précédent.

Exemple :

• Dans le "choix1", je choisit A

-> Dans le "choix2" B a été désactivé (il est invisible).

Donc si quelqu'un serait comment procéder et pourrait me l'expliquer
Merci.

[andry.aime]

Bonjour,

Une balise option doit avoir d'attribut value.

Code :

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

1
2
3
4
5
var formulaire = document.form[0];
var sel1 = formulaire.choix1.options[formulaire.choix1.selectedIndex].value;
var sel2 = formulaire.choix2.options[formulaire.choix2.selectedIndex].value;
var sel3 = formulaire.choix3.options[formulaire.choix3.selectedIndex].value;
formulaire.action=sel1+"-"+sel2+"-"+sel3+".html"

Pourquoi faire un submit vers une page html?

Dans le "choix2" B a été désactivé

tu peux le faire comme ça:

Code :

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

formulaire.choix2.options[2].disabled=true;

Mais je ne pense pas que c'est cross-browser.

A+.

[theophile76]

Merci pour ta réponse.
donc là j'ai ajouté le code javascript que tu me propose par contre je ne sais pas trop quoi mettre comme attribue à mes balises "option".
Et ce que je doit le faire en fonction du code js ?

Code :

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

Pourquoi faire un submit vers une page html?

En fait je sais pas du tout, je doit pas faire comme ça ?

Dsl j'y connais pas grand chose en js, j'ai essayé de décrypter mais j'ai un peu de mal.

[scourjean]

Pas besoin de JS supplémentaire à ce que te propose andry.aime

Mais du HTML simple, attribut value à option :

Code :

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

1
2
3
4
5
<select name="choix1"> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
</select>

[andry.aime]

Bonjour,

Si tu veux simplement rediriger la page, tu peux utiliser un simple bouton.

Code html :

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

<input type="button" value="OK" onclick="rediriger()"/>

Code :

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

1
2
3
4
5
6
7
function rediriger(){
var formulaire = document.form[0];
var sel1 = formulaire.choix1.options[formulaire.choix1.selectedIndex].value;
var sel2 = formulaire.choix2.options[formulaire.choix2.selectedIndex].value;
var sel3 = formulaire.choix3.options[formulaire.choix3.selectedIndex].value;
window.location.href=sel1+"-"+sel2+"-"+sel3+".html";
}

Je te conseilles de lire un tutoriel sur html et javascript.

A+.

[theophile76]

Merci pour t'as réponse.
du coup il ne me manque qu'une chose, comment faire pour que lorsque je clique sur mon bouton, le liens apparaisse ?
car pour l'instant mon bouton c'est juste ça :

Code :

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

<INPUT type="submit" value="Ok">

submit c'est pas bien, il vaut mieux faire quoi ?

[scourjean]

andry.aime t'as donné la réponse.

Code html :
<input type="button" value="OK" onclick="rediriger()"/>
Code :
function rediriger(){
var formulaire = document.form[0];
var sel1 = formulaire.choix1.options[formulaire.choix1.selectedIndex].value;
var sel2 = formulaire.choix2.options[formulaire.choix2.selectedIndex].value;
var sel3 = formulaire.choix3.options[formulaire.choix3.selectedIndex].value;
window.location.href=sel1+"-"+sel2+"-"+sel3+".html";
}

[andry.aime]

andry.aime a peur qu'on va tourner en rond .

du coup il ne me manque qu'une chose, comment faire pour que lorsque je clique sur mon bouton, le liens apparaisse ?

Tu n'as rien parlé de ça dans tes postes, sinon tu peux voir comment créer un élément en javascript sur la FAQ.

A+.

[theophile76]

Ok, merci à tout les 2.

Donc voilà ce que j'ai :

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
<head>
 
<script language="javascript" type="text/javascript">
function rediriger(){
var formulaire = document.form[0];
var sel1 = formulaire.choix1.options[formulaire.choix1.selectedIndex].value;
var sel2 = formulaire.choix2.options[formulaire.choix2.selectedIndex].value;
var sel3 = formulaire.choix3.options[formulaire.choix3.selectedIndex].value;
window.location.href=sel1+"-"+sel2+"-"+sel3+".html";
}
</script>
 
</head>
 
 
<body>
 
<form> 
 
<select name="choix1"> 
<option value="a">A</option> 
<option value="b">B</option> 
<option value="c">C</option> 
</select> 
 
<select name="choix2"> 
<option value="a">A</option> 
<option value="b">B</option> 
<option value="c">C</option> 
</select> 
 
<select name="choix3"> 
<option value="a">A</option> 
<option value="b">B</option> 
<option value="c">C</option> 
</select> 
 
<INPUT type="submit" value="Ok" onclick="rediriger()"> 
 
</form>
 
</body>

mais quand je clique sur le bouton OK, rien ne se passe.

[andry.aime]

Re,
forms

Code :

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

var formulaire = document.forms[0];

A+.

[vermine]

Bonjour,

Si tu veux simplement rediriger la page, tu peux utiliser un simple bouton.

Code html :

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

<input type="button" value="OK" onclick="rediriger()"/>

Distinguez bien les input de type button et les input de type submit.

[theophile76]

Merci beaucoup, ça fonctionne ^^
j'attend un peu avant de fermer ce sujet car j'ai pas encore test pour ceci :

Citation:
Dans le "choix2" B a été désactivé
tu peux le faire comme ça:
Code :
formulaire.choix2.options[2].disabled=true;
Mais je ne pense pas que c'est cross-browser.