page a onglet et submit

Le
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.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Christophe Meresse
Le #7097601
On 25 juin, 14:39, 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
Le #8291381
Christophe Meresse a écrit :

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é.

(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 ;)

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.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Paul
Le #8291391
Christophe Meresse a écrit :
On 25 juin, 14:39, Freegate
...



. 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. :) ).



Ah bon ? plutot sans la saucisse, non ;-) ?
Freegate
Le #8291371
Christophe Meresse a pensé très fort :

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
Le #8283901
Freegate a écrit :

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.

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.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Christophe Meresse
Le #8283841
On 26 juin, 01:04, Mickael Wolff
Christophe Meresse a écrit :

> 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
Christophe Meresse
Le #8283851
On 26 juin, 07:08, Freegate
Christophe Meresse a pensé très fort :



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
Mickael Wolff
Le #9646131
Christophe Meresse a écrit :

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.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Freegate
Le #9646151
Christophe Meresse avait soumis l'idée :
On 26 juin, 07:08, Freegate
Christophe Meresse a pensé très fort :



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
Publicité
Poster une réponse
Anonyme