Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

page a onglet et submit

9 réponses
Avatar
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.

9 réponses

Avatar
Christophe Meresse
On 25 juin, 14:39, Freegate wrote:

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

(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
Avatar
Paul
Christophe Meresse a écrit :
On 25 juin, 14:39, Freegate wrote:

...



. 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 ;-) ?
Avatar
Freegate
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
Avatar
Mickael Wolff
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
Avatar
Christophe Meresse
On 26 juin, 01:04, Mickael Wolff wrote:
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
Avatar
Christophe Meresse
On 26 juin, 07:08, Freegate wrote:
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
Avatar
Mickael Wolff
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
Avatar
Freegate
Christophe Meresse avait soumis l'idée :
On 26 juin, 07:08, Freegate wrote:
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