page a onglet et submit

[Freegate]

Bonjour,

Par souci de convivialité pour l'utilisateur, j'ai créé une page avec
plusieurs onglets (car la liste des données à insérer dans la base sont
conséquents).


J'aimerais que lorsque je passe d'un onglet à l'autre (en cliquant
dessus avec la souris), le contenu indiqué dans le formulaire du
premier onglet s'enregistre automatiquement avant de passer à l'autre
onglet.

Est-ce possible ? Et si oui, comment le programmner ?

Cordialement.

[Christophe Meresse]

Post by Freegate
J'aimerais que lorsque je passe d'un onglet à l'autre (en cliquant
dessus avec la souris), le contenu indiqué dans le formulaire du
premier onglet s'enregistre automatiquement avant de passer à l'autre
onglet.
Est-ce possible ? Et si oui, comment le programmner ?

Question très intéressante sur laquelle on pourrait écrire des
tartines...

Je vois plusieurs solutions:

1 - Les tabs qui font un submit() sur le formulaire et du coup un
réaffichage de la page complète et du nouveau tab à afficher.
Attention ca ne veut pas dire forcement qu'il faut insérer les données
dans la base car l'utilisateur doit pouvoir soumettre ou annuler le
tout même si il a joué avec les tabs.
Il faudrait donc mettre les données soumises soit dans la session
($_SESSION) , soit les trimbaler dans la page dans des <input
type="hidden"> (ce qui se rapproche de la solution 3)

2 - Même genre de solution mais un peu plus sympa: Ajax qui éviterait
le réaffichage complet de la page en permettant de réafficher
seulement le contenu du tab par exemple. Même remarque pour les
données que dans la solution précedante.

3 - Tous les tabs contenu dans la page mais avec un
style="display:none" sur chacun d'entre eux sauf celui courant et le
click sur les tabs appelle une fonction javascript qui switche cet
attribut display (du tab courant et du futur tab). Avantage: simple,
pas besoin de soumettre quoi que ce soit au serveur et passage d'un
tab à l'autre instantané... Inconvénient: javascript indispensable
(Mais bon, perso j'estime qu'à l'heure actuelle surfer sans javascript
c'est comme manger un hotdog sans pain... heu désolé la comparaison
m'est venue comme ça. :) ).

Pour ma part j'opterais pour la 3eme. Si quelqu'un en a d'autre ça
m'intéresse aussi !

Christophe

[Mickael Wolff]

Post by Christophe Meresse
Inconvénient: javascript indispensable

Mais non, bien au contraire. Ta solution est très élégante puisqu'elle
permet juste d'offrir une version sans javascript. En effet, avec ta
proposition, il suffit de pondre le formulaire saucissonné, et de rendre
invisible les sections au chargement de la page lors de l'événement
onload, et d'alors ajouter toute la mécanique d'interactivité.

Post by Christophe Meresse
(Mais bon, perso j'estime qu'à l'heure actuelle surfer sans javascript
c'est comme manger un hotdog sans pain... heu désolé la comparaison
m'est venue comme ça. :) ).

Le vilain troll pas beau venu de l'espace. Tu sais bien que certains
problèmes de sécurité, même ponctuels, entraîne certains comportement
prudent face à javascript.

Et puis, une saucisse sans pain ça se mange très bien, c'est un hot
dog sans moutarde qui est sacrilège ;)

Post by Christophe Meresse
Pour ma part j'opterais pour la 3eme. Si quelqu'un en a d'autre ça
m'intéresse aussi !

Je pense aussi que c'est dans ce cas, une solution optimale.

[Christophe Meresse]

Post by Christophe Meresse
Inconvénient: javascript indispensable

  Mais non, bien au contraire. Ta solution est très élégante puisqu'elle
permet juste d'offrir une version sans javascript. En effet, avec ta
proposition, il suffit de pondre le formulaire saucissonné, et de rendre
invisible les sections au chargement de la page lors de l'événement
onload, et d'alors ajouter toute la mécanique d'interactivité.

Ah oui, j'ai jamais pensé à faire comme ça ! Mais est-ce que ça ne
risque pas de faire apparaitre tout le formulaire un court instant, ce
qui ne serait pas très joli ?

  Le vilain troll pas beau venu de l'espace.

Huhu, désolé c'était un troll qui s'ignore :)

Christophe

[Mickael Wolff]

Post by Christophe Meresse
Ah oui, j'ai jamais pensé à faire comme ça ! Mais est-ce que ça ne
risque pas de faire apparaitre tout le formulaire un court instant, ce
qui ne serait pas très joli ?

Ça dépend de la configuration du navigateur. Mais en général, le
client ne devait pas afficher les formulaires qui seront cachés assez
longtemps pour être vus.

[Paul]

Post by Christophe Meresse
...

. Inconvénient: javascript indispensable

Post by Christophe Meresse
(Mais bon, perso j'estime qu'à l'heure actuelle surfer sans javascript
c'est comme manger un hotdog sans pain... heu désolé la comparaison
m'est venue comme ça. :) ).

Ah bon ? plutot sans la saucisse, non ;-) ?

[Freegate]

Post by Christophe Meresse
3 - Tous les tabs contenu dans la page mais avec un
style="display:none" sur chacun d'entre eux sauf celui courant et le
click sur les tabs appelle une fonction javascript qui switche cet
attribut display (du tab courant et du futur tab).

Bon, la solution 3 parait intéressante mais je suis une buse en
javascript. C'est peut être l'occasion ou jamais de m'y mettre.

Par contre, indépendamment de la fonction "style=display:none", j'ai du
mal à voir comment les éléments HTML des différents formulaires vont
s'organiser ou se placer sur cette page unique.

Peux tu m'éclairer un peu ?

Merci

[Mickael Wolff]

Post by Freegate
Bon, la solution 3 parait intéressante mais je suis une buse en
javascript. C'est peut être l'occasion ou jamais de m'y mettre.

Oui, surtout que ça c'est très simple à faire. Je t'encourage à poser
la question dans fr.comp.lang.javascript quand tu auras déjà fait le
formulaire HTML, testé et tout et tout.

Post by Freegate
Par contre, indépendamment de la fonction "style=display:none", j'ai du
mal à voir comment les éléments HTML des différents formulaires vont
s'organiser ou se placer sur cette page unique.

Les éléments qui ont pour style diplay à none, ils ne seront tout
simplement pas affiché. Il faudra les afficher en cliquant sur une zone
qui représentera l'étiquette de ton onglet. Mais là, ce n'est plus du PHP.

[Christophe Meresse]

Post by Freegate
Par contre, indépendamment de la fonction "style=display:none", j'ai du
mal à voir comment les éléments HTML des différents formulaires vont
s'organiser ou se placer sur cette page unique.

Tout simplement les uns à la suite des autres.
Tu peux voir un exemple là
http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html
(par contre l'exemple n'implémente pas l'idée de Mickaël Wolff qui
permet d'utiliser la page dans le cas ou javascript n'est pas activé)

Christophe

[Freegate]

Post by Christophe Meresse

Post by Freegate
Par contre, indépendamment de la fonction "style=display:none", j'ai du
mal à voir comment les éléments HTML des différents formulaires vont
s'organiser ou se placer sur cette page unique.

Tout simplement les uns à la suite des autres.
Tu peux voir un exemple là
http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html
(par contre l'exemple n'implémente pas l'idée de Mickaël Wolff qui
permet d'utiliser la page dans le cas ou javascript n'est pas activé)
Christophe

ok j'ai trouvé un code immédiatement fonctionnel sur le lien suivant
qui s'incrit parfaitement dans la solution 3 :

http://www.clubic.com/forum/programmation/php-formulaire-avec-des-onglets-id177956-page1.html

J'ai juste changé les "visibility:hidden" en "display:none" et ça
fonctionne comme je veux.

Ma page a de la gueule maintenant !!!

Merci pour tout