Discussion :

[Jinx_]

Bonjour,

Je développe en PHP (non, je ne me suis pas trompé de forum) une application simple pour gérer les DVD, DivX, VHS et Livres.

J'avais l'idée de faire un formulaire/page d'ajout de média par type de média (un formulaire pour les livres, un second pour les DVD, etc) mais je trouve que c'est un peu lourd: il me faudra 4 formulaires. Or avec un seul on pourrai faire aussi bien et plus rapidement. J'explique.

J'ai vu un certain nombre de site web dynamique une fonctionnalité qui m'intéresse mais je ne sait pas comment faire: l'aspect dynamique vient du fait que sur une zone de liste déroulante (appelée combo box en Visual Basic et 'select' en HTML) on pouvait, selon le choix de cette liste déroulante, faire évoluer la page web dynamiquement. Par exemple, si on a un 'select' composé de 4 choix (DVD, DivX, VHS et Livre) faire évoluer la page dynamiquement selon le choix de l'utilisateur. Par exemple, si l'utilisateur sélectionne 'Livres' alors une zone de texte 'ISBN' apparait. Comment faire ?

Il est possible que cette fonctionnalité que j'ai vu plusieurs fois sur plusieurs site web, n'est peut-être pas du HTML ni même du DHTML. Peut-être du Java/J2EE. Ou PHP. Je ne sais pas bien.

Merci de toute aide.

J.

[HiRoN]

Bonjour,

Par exemple déclencher le submit sur le "onchange" du select (voir mettre bouton), après plusieurs possibilités :

- Reconstruire la page via php pour afficher ou non les champs voulus
- Possible aussi en Javascript (jouer sur des display:block ou none) et évitera actualisation page
- Mixer les deux (pour du javascript non intrusif > Pas de bugs si désactivé > Php prend le relais)...

[Jinx_]

Merci Mathieu.

La première solution, en PHP, pour reconstruire la page me séduit le plus.

Est-ce que tu peux parler davantage du 'submit' ? Et du "onchange" du select, svp ?

Un exemple ?

Merci.

J.

[HiRoN]

Merci Mathieu.
La première solution, en PHP, pour reconstruire la page me séduit le plus.
Est-ce que tu peux parler davantage du 'submit' ? Et du "onchange" du select, svp ?
Un exemple ?

Exemple rapide (l'ensemble est à approfondir) :

Si 100% php, il te faudra un bouton de type "submit"...

En gros, l'utilisateur choisit dans la liste ce qu'il veut et clique sur le bouton.
Le submit se déclenche, la page se recharge, $_POST contient la valeur du choix de l'utilisateur et au niveau affichage, c'est du genre :

Code PHP :

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

1
2
3
if($_POST['monchamp'] == 'maVal') {
 // J'affiche le champs
}

Ce qui permet donc de mettre des champs personnalisés en fonction des choix.
Pour le onchange > évenement déclenché au changement sur la liste déroulante. Il te suffit de créer une fonction :

Code HTML :

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

<select ... onchange="monTest();">

Et côté Javascript :

Code Javascript :

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

1
2
3
function monTest() {
 document.submit(); // En fonction de ce que tu veux faire exactement
};

En gros, si JS désactivé, tu affiches le bouton "submit" (car si pas de JS > Pas de onchange donc faut bien cliquer quelque part)
Si JS activé, tu caches le bouton au "onload" (avec un display:none; part ex) et au changement sur la liste déroulante le clic sur le submit sera remplacé par l'action sur le onchange (action lui disant de submit)...

Mais avec cette technique, il y aura dans tous les cas un rechargement de la page... (car avec ou sans JS, c'est le php qui construit la page)

En espérant avoir été clair...

[Jinx_]

Merci beaucoup Mathieu.

Pour la soluce 100% PHP, c'est bon. J'ai capté.

En revanche pour la soluce Java Script, c'est un peu plus confus. Si j'ai bien compris dans la fonction function monTest()

function monTest() {
document.submit(); // En fonction de ce que tu veux faire exactement
};

il faudrait que je mette du code pour afficher des champs (fonction du choix de l'utilisateur dans la liste déroulante). Comment faire ?

J.

[tibotibo69]

Salut,

Tu peux faire comme ceci :

Code :

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

1
2
3
function monTest() {
document.getElementById('nom_de_ton_element').style.display = "block";
};

ce qui affichera les éléments voulu au moment du onchange.