Mixer Table et Forms

[winzou]

Salut a tous,

J'ai un petit problème qui me pose de gros problèmes :p

J'ai un tableau. Dans ce tableau des données, avec sur chaque ligne une checkbox pour sélectionner la ligne. En fin de tableau, un bouton pour supprimer/etc d'un coup toutes les lignes sélectionnées. J'ai donc un <form> avant mon <table> et un </form> après mon </table>.

Parfait ça marche.

Maintenant, je veux ajouter un formulaire dans le header de mon tableau (juste en dessous du nom des colonnes). C'est un formulaire pour ajouter facilement une nouvelle ligne.

Le problème : entre le formulaire d'ajout et le formulaire de sélection (les checkboxe), comment gérer les <form> ??

On ne peut pas mettre de <form> dans un <tr>, chrome me le supprime purement et simplement. On ne peut pas mettre de form entre le table et le tbody, chrome m'en fait un mix bizarre également.

Bref... je vois pas trop comment m'en sortir ici. Est-ce que quelqu'un a une idée ? Ou alors une esquive ?

Merci !

[Bovino]

Tu ne peux tout simplement pas mettre un formulaire dans un autre formulaire...

[winzou]

Tu m'aides pas beaucoup... Je le sais bien ca, et je ne l'ai pas fait ici d'ailleurs.
J'avais espere pouvoir faire comme ca :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <form>
    <thead>
      <!-- ici mon formulaire d'ajout -->
    </thead>
  </form>
  <form>
    <tbody>
      <!-- ici mon formulaire de selection -->
    </tbody>
  </form>
</table>

Mais evidemment c'est impossible egalement. Une table est une table et n'accepte pas de form au milieu. C'est vraiment etrange, si tu as un formulaire sur plusieurs cellule au milieu d'un tableau, tu dois mettre tout ta table dans le formulaire !

Mais du coup comment faire dans mon cas ?

[RomainVALERI]

Tu te poses peut-être un faux problème : la première question étant "Pourquoi vouloir un second formulaire ?" Quelle fonctionnalité veux-tu ajouter ? Si effectivement c'est pour ajouter une ligne dans ton tableau, je ne vois pas le rapport avec un <form> Un formulaire est une zone de saisie destinée à collecter des données de l'utilisateur pour les envoyer au serveur... en l'occurrence, l'action de créer une ligne se passe sur le poste client, ça n'a a priori aucun rapport avec le serveur. Si en revanche tu as besoin de récupérer des données du serveur pour construire cette ligne, fais un appel ajax

Mais si ce n'est pas le cas, ou si les données utiles ont déjà été collectées au chargement de la page, fais-toi une fonction qui manipule le DOM de ton tableau, place-la sur un <button> et ça roule

PS : Singapour ? sans déconner ? c'est pas courant ça ^^

[Atomya Rise]

Ou alors tu peux utiliser un form_lien Avec des fonctions php et un tout petit peux de JavaScript

Voici ce que j'utilise pour les grandes pages demandant quelques formulaire :

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function _a_form($id_form, $params, $contenu) {
	$a_form = "<a href=\"#\" onclick=\"";
	foreach($params as $param) {
		$a_form .= "document.getElementById('" . $param[0] . "').value='" . $param[1] . "';";
	}
	$a_form .= "document.getElementById('" . $id_form . "').submit(); return false\">";
	$a_form .= $contenu;
	$a_form .= "</a>";
	return $a_form;
}
 
function form_lien($id_form, $href, $params, $target = "", $champs = array()) {
	$form = "<form id=\"" . $id_form . "\" method=\"post\" action=\"" . $href . "\" " . $target . ">";
	foreach($params as $param) {
		$form .= "<input type=\"hidden\" id=\"" . $param[0] . "\" name=\"" . $param[1] . "\">";
	}
	foreach($champs as $champ) {
		$form .= "<input type=\"hidden\" name=\"" . $champ[0] . "\" value=\"" . $champ[1] . "\">";
	}
	$form .= "</form>\n";
	return $form;
}

Et dans mes pages html j'utilise la fonction form_lien hors de toutes balise form afin de ne pas le faire répétter je ne sais combien de fois :

Code php :

1
2
 
echo form_lien("IDduForm", "UrlQuiTraiteraLesDonnees", array(array("IdDeLinputCacher", "id"), array("IdDeLinputCacher2", "pseudo")), "", array(array("do", "editer")));

En ce qui concerne le array(array("do", "editer") Celui-là me sert pour mettre un input hidden avec l'action, c'est un paramètre supplémentaire non-obligatoire

Et ensuite mon lien qui me servira de formulaire pour envoyer les données :

Code php :

1
2
 
_a_form("IDduForm", array(array("IdDeLinput", $arr['id']), array("IdDeLinputCacher2", $arr['pseudo'])), "Mon lien qui servira de formulaire")

Voilà ! J'espère que cela t'aidera à faire ce que tu souhaite faire ^^

[winzou]

Merci pour vos reponses ! Pour preciser un peu plus ce que je cherche a faire, j'ai fait un screen cf piece jointe.

J'ai donc bien 2 formulaires : ajouter une nouvelle entree, et supprimer des entrees existantes. Les 2 ont besoin de communiquer avec le serveur, car je veux ajouter/supprimer en bdd a chaque action.

Seulement pour avoir cette presentation, je suis oblige de mettre le 1er formulaire dans la table. En fait, ce qui serait parfait pour moi, c'est de trouver un moyen d'avoir cette presentation mais avec mon formulaire en dehors du DOM de ma table (donc via hack CSS pour le placer entre le thead et le tbody de ma table... c'est moche mais ca m'arrangerait).

Pour les solutions a coup de onclick ou de button+JS, en fait je prefererais vraiment trouver un truc compatible sans JS !

[12monkeys]

Bonjour

Je rejoins l'avis de RomainVALERI.
Je ne vois pas pourquoi tu aurais besoin de 2 formulaires différents : tu as un bouton submit et des "boutons"(?) delete, il suffit de faire le traitement approprié coté serveur en fonction du bouton actionné.

[RomainVALERI]

Envoyé par winzou

J'ai donc bien 2 formulaires : ajouter une nouvelle entree, et supprimer des entrees existantes. Les 2 ont besoin de communiquer avec le serveur, car je veux ajouter/supprimer en bdd a chaque action.

La confusion est la même que plus haut : "ajouter une nouvelle entree" et "supprimer des entrees existantes" sont les deux actions utilisateur de ton (unique, ou qui devrait l'être) formulaire... ^^ On ne parle pas ici du paramètre "action" du form, mais bien des possibilités accessibles à l'utilisateur avant qu'il ne confirme sa saisie par un submit.
C'est le même principe pour un formulaire avec plusieurs champs, un bouton reset, un bouton submit, un bouton autre chose : on ne va pas créer 4 formulaires pour ça.
(Imagine un peu le form de la déclaration d'impots en ligne... celui-là c'est du costaud : heureusement qu'il n'y a pas un form pour chaque bouton ou input... )

[winzou]

Uhm, sauf que la mes 2 formulaires n'ont rien a voir. Pour les impots tous les champs que tu remplis servent le meme but : calculer combien l'Etat va te taxer :p

Moi mes 2 formulaires ont des buts bien distincts : l'un ajoute 1 item et l'autre supprime X items. Si j'ai les champs d'ajout remplis et 3 cases de suppression cochees : a la validation du formulaire je fais quoi ?? Le visiteur a coche des cases puis a change d'avis en voulant juste ajouter une entree ? Ou l'inverse ? Ou les deux ?

Anyway, c'est ce que je me suis resigne a faire merci. Mais outre le probleme semantique que je viens d'enoncer, j'ai un autre probleme cote javascript. A la validation de l'un ou de l'autre, si la requete ajax est la meme, le comportement (insertion d'une ligne ou suppression) est bien different. J'arrive plus ou moins a m'en sortir, mais c'est vraiment moche cote code !

Bref, ce que je trouve pas super en html, c'est que si on a 2 champs d'un formulaire dans 2 cases differentes d'un tableau, alors on n'a pas d'autre moyen d'englober _tout_ le tableau dans la form ! Ca m'etonne beaucoup qu'il exxiste pas un moyen de dire "tel input, quelque soit sa place dans le DOM, correspond a tel form", un peu comme les label avec leur attribut for.

[RomainVALERI]

Sur la même page, un formulaire d'inscription qui fait une grosse requête en base PLUS, en bas de page, un mini-formulaire pour envoyer le lien à un ami, par exemple : là, OK, tu as bien deux formulaires logiques distincts.

Dans ton cas, pourquoi ne pas faire des appels ajax pour supprimer/ajouter des lignes sans reconstruire le tableau à chaque fois ?

Mais bon, j'arrête d'insister cette fois, fais comme tu veux

[12monkeys]

Je ne trouve pas que ce soient des buts distincts ce que tu nous indiques... Un seul formulaire peut parfaitement le faire.

Ensuite pour les conflits que tu cites : c'est à ton code de les régler ! D'après l'image si dessus tu as des boutons différents en fonction de l'action que tu veux effectuer, donc en fonction du bouton actionné tu fais un type de traitement et tu mémorises le second (cases cochées par exemple) et à la fin du traitement tu réaffiches le formulaire avec les éléments mémorisés.
Si tu n'avais qu'un type de bouton d'action tu ferrais les deux types de traitement en vérifiant au préalable qu'il n'y a pas de conflit (remplir case qu'on supprime par exemple) et si conflit tu réaffiches le formulaire avec un message d'erreur...

[winzou]

Lol j'avoue que j'ai du mal à comprendre votre position, et je vous promets que je ne le fais pas exprès :p Pour moi supprimer et ajouter sont les actions les plus contraires du monde, et vous trouvez qu'elles ont le même but ?

Envoyé par RomainVALERI

Dans ton cas, pourquoi ne pas faire des appels ajax pour supprimer/ajouter des lignes sans reconstruire le tableau à chaque fois ?

C'est ce que je fais déjà, mais je tiens à ce que mon code soit compatible avec ceux qui n'ont pas de JS. De plus, le fait d'utiliser un meme formulaire pour des actions différente, ca rend très compliqué d'utiliser des plugins jquery pour les forms etc.

@12monkeys, je ne peux pas les régler. Reprend mon cas ou le visiteur coche des cases et en fait change d'avis, il veut ajouter une ligne et rempli le formulaire d'ajout. Il n'a pas décoché les cases. Je dois deviner comment ce qu'il veut vraiment ? Avec un mt_rand ?

Bref, j'utilise déjà votre solution avec un seul form, et ca marche plus ou moins. Mais je vous assure que niveau code c'est vraiment hideux, avec des if suivant les cas, etc. Ca rend le code impossible à réutiliser, et difficilement maintenable.

Je cherchais une solution propre avant de faire comme ca, mais c'est visiblement impossible !

[Bisûnûrs]

Tu veux faire un tableau pour mettre en forme ? Alors tu vas être obligé de faire avec tous les problèmes qu'ils posent.
Notamment, si tu veux un formulaire par ligne, il faut rajouter une complexité de plus à ton tableau :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table>
   <tr>
      <td>
         <form>
            <table>
               <tr>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </table>
         </form>
      </td>
      <td>
         <form>
            <table>
               <tr>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </table>
         </form>
      </td>
   </tr>
</table>

[RomainVALERI]

Envoyé par winzou

Lol j'avoue que j'ai du mal à comprendre votre position, et je vous promets que je ne le fais pas exprès :p Pour moi supprimer et ajouter sont les actions les plus contraires du monde, et vous trouvez qu'elles ont le même but ?

Ces deux actions ont des résultats contraires, mais sont de même nature ^^

>>> Elles opèrent sur les lignes du même tableau de données. Que ce soit un ajout ou une suppression n'a d'incidence qu'au niveau du traitement serveur.

Envoyé par winzou

[en réponse à l'idée de faire des appels AJAX]
C'est ce que je fais déjà, mais je tiens à ce que mon code soit compatible avec ceux qui n'ont pas de JS

Tu fais de l'AJAX sans JS donc ?

[12monkeys]

Envoyé par winzou

@12monkeys, je ne peux pas les régler. Reprend mon cas ou le visiteur coche des cases et en fait change d'avis, il veut ajouter une ligne et rempli le formulaire d'ajout. Il n'a pas décoché les cases. Je dois deviner comment ce qu'il veut vraiment ? Avec un mt_rand ?

Je vois vraiment pas où est le problème : sur ton image tu as un bouton submit et des delete.
Quand l'utilisateur clique sur submit tu crées une nouvelle entrée.
Quand l'utilisateur clique sur delete tu supprime la ou les entrées sont cochées.
Les deux ne rentrent même pas en conflit.

Si tu n'avais qu'un seul bouton pour les deux : idem. Si l'utilisateur demande la suppression de l'élément qu'il est en train de créer (ce qui ne semble pas possible dans ton cas), et bien tu ne fais rien et tu lui renvoi le formulaire avec un joli message d'erreur : "on ne peut pas supprimer un élément qu'on est en train de créer"...

[winzou]

Vous voulez vraiment pas me croire, mais essayez d'imaginer un peu :
- J'utilise datatables pour avoir un tableau sympa avec option de tri à la volée en JS : ta solution Bisûnûrs n'est pas possible car je dois avoir les header et les lignes dans le même tableau.
- J'utilise jquery et son plugin form pour gérer l'envoi ajax des form : avec ca, un clic sur un bouton submit name=truc ne crée pas de $_POST[truc] cote PHP, je dois gérer le cas à la main côté JS pour l'ajouter
- Quid lorsque l'utilisateur appuie sur entrée ? Je sais pas s'il a voulu cliquer sur Ajouter ou sur Supprimer.
- Le tout avec un formulaire compatible sans JS (RomainVALERI... et donc sans Ajax oui :p mais je voulais dire que ca fait des contraintes supplémentaires)
- Côté PHP, j'utilise Symfony et c'est pas ultra pratique de tuner les boutons dans tous les sens comme ca.
- etc

Bref, avec 2 formulaires distincts, j'aurais réglé la question en 10min avec un code super propre et réutilisable. La j'en suis a plusieurs heures passées, et je dois toujours régler des petits trucs par ci par la pour un comportement optimal. Voila pourquoi je veux tant séparer mes formulaires.

[RomainVALERI]

Effectivement, sans remettre en question l'ergonomie du formulaire, c'est un certain casse-tête... (même si je comprends bien les raisons qui t'ont fait souhaiter de ne pas avoir à en arriver là... )