Discussion :

[E. Nigma]

Hello @ tutti,

Je développe une fiche d'inscription sur laquelle je propose des choix via des select.
Un 1er choix dans un 1er select affiche, suivant l'option choisie, un 2e select. Le choix dans le 2e select affiche, suivant l'option choisie, un input text.

Tout ceci fonctionne parfaitement bien sur IE, Chrome, Firefox et Safari.
Sur Android (Samsung Galaxy Tab 2) le comportement est bizarre : le choix dans le 1er select affiche bien le 2e select, MAIS bizarrement le choix dans le 2e select n'affiche pas l'input text...

Mon code html :

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
24
25
26
27
28
29
30
31
32
33
<div id="champReseau">
Réseau *: 
	<select name="reseau" id="choixReseau" onchange="moreExp()" required>
		<option value="">Sélectionnez</option>
		<option value="Ventes Grocery">Ventes Grocery</option>
		<option value="Ventes Impulse">Ventes Impulse</option>
		<option value="MMT">MMT</option>
		<option value="Category">Category</option>
		<option value="P&O">P&O</option>
		<option value="Corporate Affairs">Corporate Affairs</option>
	</select>
</div>
 
<div id="champFonction" style="display:none;" onchange="reqField()">
Fonction *: 
	<select name="fonction" id="choixFonction">
		<option  id="default" value="">Sélectionnez</option>
		<option value="Chef de Secteur">Chef de Secteur</option>
		<option value="Promoteur">Promoteur</option>
		<option value="Responsable secteur">Responsable secteur</option>
		<option value="Directeur Régional">Directeur Régional</option>
		<option value="Directeur Force de Vente">Directeur Force de Vente</option>
		<option value="Cellule Formation">Cellule Formation</option>
		<option value="Equipe CSO">Equipe CSO</option>
		<option value="Equipe DCN">Equipe DCN</option>
		<option value="Autre">Autre</option>
	</select>
</div>
 
<div id="champDirReg" style="display:none;">
	<label for="dirReg">Direction régionale *:</label>
	<br /><input type="text" name="dirReg" id="dirReg" maxlength="30" />
</div>

Mes fonctions js :

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
function moreExp() {
    if (document.getElementById("choixReseau").value == "Ventes Grocery") {
        document.getElementById("champFonction").style.display = "block";
        document.getElementById("champDirReg").style.display = "none";
    } else if (document.getElementById("choixReseau").value == "Ventes Impulse") {
        document.getElementById("champFonction").style.display = "block";
        document.getElementById("champDirReg").style.display = "none";
    } else {
        document.getElementById("champFonction").style.display = "none";
        document.getElementById("champDirReg").style.display = "none";
        document.getElementById("default").selected = "selected";
        document.getElementById("dirReg").value = '';
    }
}
 
function reqField() {
    if (document.getElementById("choixFonction").value == "Chef de Secteur") {
        document.getElementById("champDirReg").style.display = "block";
        document.getElementById("dirReg").value = '';
    } else if (document.getElementById("choixFonction").value == "Promoteur") {
        document.getElementById("champDirReg").style.display = "block";
        document.getElementById("dirReg").value = '';
    } else if (document.getElementById("choixFonction").value == "Responsable secteur") {
        document.getElementById("champDirReg").style.display = "block";
        document.getElementById("dirReg").value = '';
    } else if (document.getElementById("choixFonction").value == "Directeur Régional") {
        document.getElementById("champDirReg").style.display = "block";
        document.getElementById("dirReg").value = '';
    } else {
        document.getElementById("champDirReg").style.display = "none";
        document.getElementById("dirReg").value = '';
    }
}

Une idée quelqu'un ? Je vois dans tous les forums que onchange fonctionne bien sur Android, ce qui se vérifie pour mon cas, mais jusqu'à un certain point seulement.
Ca doit donc être mon code qui est incorrect quelque part...

Merci par avance pour votre aide

[ABCIWEB]

Salut,

Mets le onchange dans ta balise select et pas dans la balise div.

[E. Nigma]

salut ABCIWEB,

RRhhooooolalalalalaaaaaa...
Merci pour ta réponse, c'est exactement ça, je dois avoir le nez depuis trop longtemps sur ma page pour l'avoir vu moi-même.


Bonne soirée à toi

[NoSmoking]

Bonjour,
ce qui est pour le moins curieux c'est que

Tout ceci fonctionne parfaitement bien sur IE, Chrome, Firefox et Safari.

[ABCIWEB]

Dans certaines circonstances et avec certains navigateurs ça peut fonctionner, évidemment c'est la loterie.

Mais c'est vrai qu'au départ avant de regarder le code je voyais le sujet mal parti car ce ne serait pas la première fois qu'android a des bug. Dernièrement j'ai constaté que la version 4 ne supporte pas l'attribut multiple dans un champ html de type file. Et apparemment la version 5 a "corrigé" ce bug avec un support allant jusqu'à la valeur extraordinaire de 2 fichiers. Grandiose ! Pour des gus qui veulent révolutionner le monde, ça fait un peu peur

[NoSmoking]

Certes mais sur ce coup, ils restent les plus rigoureux

[ABCIWEB]

Certes mais sur ce coup, ils restent les plus rigoureux

Tu devrais faire de la politique ou du commerce

[E. Nigma]

Mais carrément, moi aussi j'ai trouvé ça hyper bizarre que ça fonctionne sur les autres navigateurs...
Je dirais même que c'est presque flippant !
Bonne soirée à vous (c'est bien de pas fumer... )

[ABCIWEB]

Flippant ou pratique suivant les points de vues...

Je crois me souvenir que le onchange ne fonctionnait jamais en dehors des champs de formulaire dans les anciens navigateurs. J'ai donc plutôt l'impression que c'est une fonctionnalité qu'implémentent de plus en plus de navigateurs, officieusement.

Alors rigoureux ou en retard ? J'en sais rien à vrai dire mais ma petite remarque précédente était pour souligner l'apriori favorable que l'on peut avoir sur les technologies développées par google. Si android est rigoureux que dire alors de Chrome sur pc qui a un comportement inverse ? C'est la faute du pc ?

Je me suis intéressé à l'upload de fichier, en php il y a longtemps et plus récemment en ajax. Il est impossible de suivre la progression du téléchargement de fichiers avec Chrome en utilisant la variable php "session.upload_progress" car ce navigateur, tout comme Safari, ne supporte pas l'envoi de requêtes ajax durant la soumission d'un formulaire alors que cela fonctionne correctement avec Firefox et IE. Apparemment ce bug ne sera jamais corrigé.
Bon c'est vrai qu'aujourd'hui on peut faire de l'upload ajax... Ce que j'ai fait pour me rendre compte qu'il y a maintenant un problème sur l'upload multiple avec android.
Alors je me dis que soit google m'en veut personnellement, soit faut pas trop gratter pour trouver des bugs dans la merveilleuse technologie google

[NoSmoking]

Je crois me souvenir que le onchange ne fonctionnait jamais en dehors des champs de formulaire dans les anciens navigateurs.

du peu d'essais que j'ai réalisés seuls les éléments de formulaire INPUT, TEXTAREA, SELECT... font que le conteneur reçoit un événement change, ...il y a anguille sous roche.

[ABCIWEB]

Oui le bouillonnement remonte et pas seulement jusqu'au premier parent.
Peut-être pour permettre d'exploiter un événement on change plus général sur les éléments d'un formulaire. Difficile à savoir, pas moyen de trouver un début de documentation sur ce comportement...

[E. Nigma]

Merci en tous cas ABCIWEB et NoSmoking pour cet échange instructif.
Bonne journée à vous.