Formulaires HTML

Bonjour,

Je suis entrain de travailler sur un projet de site web avec PHP et MySQL.

Je voudrais y mettre en oeuvre un formulaire dont le bouton "submit" serait en réalité l’ensemble du formulaire (il suffirait de cliquer quelque part dans le formulaire pour envoyer les données à la page PHP de traitement). Je ne sais pas du tout comment m’y prendre,

Merci d’avance,

@flopy78

Avec un brin de JS ça ne devrait pas être sorcier.

document.forms[3].addEventListener('click', e => e.target.submit())

Si tu reçois ce message, c’est que ça a marché.

La partie document.forms[3] est quelque chose que je viens de découvrir en lisant la spécification de HTMLFormElement. Tu peux très bien utiliser document.querySelector('#idDuForm') à la place.

Bonjour,

Merci beaucoup pour le coup de pouce !

Bonne journée,

@flopy78

Salut,

C’est quand même un cas qui me semble un peu étrange. Pourquoi le formulaire devrait être entièrement cliquable ? Qu’est-ce que tu essaies de faire concrètement ? Ne crains-tu pas d’avoir des problèmes d’utilisabilité ou d’accessiblité ?

Bonjour,

J’essaye de faire un catalogue de livres (type Amazon). Les livres sont affichés sous forme d’icones (qui sont en fait mes fameux formulaires, qui contiennent une <input type = "hidden"> envoyant l’identifiant du livre), et je voudrais qu’on puisse accéder au détail du livre (une autre page qui récupère les informations du formulaire pour afficher le détail du livre) en cliquant n’importe ou sur lui.

Avec la solution ci-dessus, j’ai rencontré un petit problème : l’évènement cible l’image à l’intérieur du formulaire et non pas le formulaire lui-même…

Bonne journée,

@flopy78

Pourquoi ne pas utiliser un lien (<a href="">) plutôt ? Visiblement ce que tu cherches à faire est créer une navigation, pas lancer une recherche ou envoyer des informations à stocker au serveur.

Niveau accessibilité (voire même navigation au clavier) l’expérience risque d’être au mieux médiocre, au pire insoutenable en détournant des formulaires comme tu le fais.

je voudrais qu’on puisse accéder au détail du livre (une autre page qui récupère les informations du formulaire pour afficher le détail du livre) en cliquant n’importe ou sur lui.

Je soutiens @viki53, c’est une navigation ça. Ça se fait avec des liens. Tu as un argument en faveur de l’utilisation de form dans ce cas là ?

Bonjour,

Le problème que je rencontre avec les liens est que je ne peux pas faire transiter des données de la page de présentation à la page de détails(à moins que ce ne soit possible et que je ne sache juste pas comment m’y prendre), ce qui est indispensable, puisque je n’est en fait qu’une seule page de détail qui se génère dynamiquement en fonction de ce qu’elle reçoit du formulaire…

J’ai finalement réussi à résoudre mon problème en utilisant l’attribut "onclick" du formulaire…

Salut

monlien?unParametre=saValeur&unAutreParametre=saValeur&…, et on utilise $_GET au lieu de $_POST.

Je trouve plutôt surprenant que tu ne connaisses pas. A moins que tu aies tellement de données qu’il faut utiliser POST ? Auquel cas il y a peut-être certaines informations que tu fais transiter et qui n’ont pas besoin de le faire de cette manière.

L’attribut onclick est déconseillé depuis des années.

Je pense que si tu utilises des POST alors, il y a beaucoup trop de choses dans l’architecture de ton projet qui ne vont pas.

Aussi, le fait que tu n’arrives pas à résoudre ce problème:

Avec la solution ci-dessus, j’ai rencontré un petit problème : l’évènement cible l’image à l’intérieur du formulaire et non pas le formulaire lui-même…

Est un signe que tu n’es pas coutumier de l’informatique. Ou au moins de JS mais la première option expliquerait également les choix architecturaux douteux.

J’ai le sentiment que tu bricoles en cherchant à droite à gauche. Ça marche à peu prêt comme tu veux, donc tu t’en tiens à ça. C’est pas pas trop mal comme stratégie pour apprendre en vérité.

Juste, l’attribut onclick (ainsi que la flopée d’attributs du même style) est déprécié et désormais ne fonctionne plus dans certains cas. Il pose un problème de sécurité et de responsabilité (l’HTML n’a pas à contenir de logiques mais sert à structurer le document).

La solution pour ton problème de target est simplement de ne pas utiliser target. Tu peux à la place utiliser currentTarget ou simplement répéter le document.querySelector('#idDuForm') dans la lambda :

document.querySelector('#idDuForm').addEventListener('click', e => document.querySelector('#idDuForm').submit())

Bonjour,

J’utilise la méthode GET avec mon formulaire.

Je devrais donc plutôt créer manuellement mon url GET ?

Effectivement, je suis encore relativement débutant en informatique…

Bonne journée,

@flopy78

Le résultat de la méthode GET est exactement le lien avec paramètres comme indiqué par Ymox Comme ache, je soutiens vicky53 : c’est de la navigation, faut pas compliquer inutilement…

Je devrais donc plutôt créer manuellement mon url GET ?

Oui ça serait bien au niveau navigation et SEO.
Alors, je modérerais tout de même le « manuellement ». Je ne code moi-même pas en PHP mais c’est une opération qui me semble essentielle et il doit exister des fonctions faites pour ça. Il me semble, mais comme je l’ai dit, je ne suis pas expert en PHP, que tu dois pouvoir utiliser http_build_query.

Et d’utiliser les liens A. N’hésite pas à revenir si tu as un problème avec cette solution.

Bonjour,

J’ai mis à jour mon code avec la balise <a> et j’ai généré manuellement mon url GET (il n’y a qu’un seul paramètre, ce n’est pas trop long).

Ça fonctionne à merveille !

Merci beaucoup,

@flopy78