Discussion :

[JujuPomme]

Hello,

J'ai un formulaire dans un <table>, qui génère des lignes avec à chaque bout de ligne, deux boutons, de type submit qui ont pour but d'update certains champs dans la BDD.

Aujourd'hui tout fonctionne sans aucun problème, sauf que c'est un peu redondant, quand on peut avoir une dizaine de lignes, de faire le traitement. (Pour expliquer le contexte, chaque ligne représente une entreprise qui a réserver des places pour un spectacle. Le premier bouton, permet d'attribuer des places à une entreprise, le second permet de dire combien de personne ont été présentes lors de l’événement.)

Donc j'aimerais avoir seulement deux boutons (plutôt que 2 sur chaque ligne) qui soumettent les valeurs des colonnes associées.

Je sais pas si c'est bien claire, rien ne vaut un peu de code pour se rendre compte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
foreach($results as $row) {
echo "<form method='post' action='index.php?option=com_content&view=article&id=528&retour=675' id='form_reservation'>";
echo "<tr>";
echo "<td class='text-center'>".$row->nom_structure."</td>";
echo "<td class='text-center'>".$row->nb_places_demandees."</td>";
echo "<td class='text-center'><input type='number' id='nb_places_attribuees' name='nb_places_attribuees' value='".$row->nb_places_attribuees."'></td>";
echo "<input type='text' name='id_reservation' id='id_reservation' value='".$row->id_reservation."' style='display: none;'>";
echo "<td class='text-center'><input name='attribution_places' type='submit' class='btn btn-success' value='Attribuer'></td>";
echo "<td class='text-center'><input type='number' id='nb_places_utilisees' name='nb_places_utilisees' value='".$row->nb_places_utilisees."'></td>";
echo "<td class='text-center'><input name='places_utilisees' type='submit' class='btn btn-success' value='Confirmer'></td>";
echo "</tr>";
echo "</form>";
}

Je précise que c'est du développement fait sous Joomla!, que ce code ce situe dans un article et que cette syntaxe un peu bizarre, est lié à Sourcerer qui permet d'ajouter du PHP/JS.

Je m'excuse également si j'ai publié au mauvais endroit, j'ai juste eu un soupçon de javascript dans ma requête n_n

[SpaceFrog]

Briser la structure d'un table en encapsulant le tr dans un form c'est vraiment pas top ...

il vaut mieux avoir juste les form dans le dernier td en bout de ligne et éventuellement des inputs hidden avec les valeurs dedans.


Sinon un seul form en base de page
et au click des boutons tu peuple des input hidden de l'unique form

Ou encore un traitement ajax en ayant concaténé les données dans un json au click sur les boutons

[JujuPomme]

Hello la Grenouille,

Merci pour ta réaction plus-que rapide.

Qu'entends-tu par briser la structure d'un table?
J'ai procédé de cette manière, car en me renseignant un peu j'ai pu lire

A form is not allowed to be a child element of a table, tbody or tr

Je note tes solutions.

Je pensais également à faire une fonction JS qui les soumets un par un... Je suis conscients que c'est pas du joli joli.

[SpaceFrog]

j'ai déja fait des tableaux avec des checkbox en bout de ligne
avant le submit une fonction scanne le tableau pour coller dans un json ou des input hidden les données des lignes sélectionnées, et soumettre le form ou faire un ajax


Pour ce qui est de ma remarque sur la structure:
quand je vois

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
foreach($results as $row) {
echo "<form method='post' action='index.php?option=com_content&view=article&id=528&retour=675' id='form_reservation'>";
echo "<tr>";

ça veut dire qu'au final tu as un code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<table>
  <form>
    <tr>
        <td></td>
        <td></td>
    <tr/>
   </form>
  <form>
    <tr>
        <td></td>
        <td></td>
    <tr/>
    </form>
.../...
</table>

ce qui n'est vraiment pas recommandé
de plus tu dupliques des id ... ce qui la est encore moins recommandé

[JujuPomme]

ce qui n'est vraiment pas recommandé
de plus tu dupliques des id ... ce qui la est encore moins recommandé

Oupsssss. Il est vrai, j'avais oublié. J'avais donné un id unique à chaque form avec une variable que je concaténais sur l'id, que j'ai enlevé pour... des raisons inconnues

j'ai déja fait des tableaux avec des checkbox en bout de ligne
avant le submit une fonction scanne le tableau pour coller dans un json ou des input hidden les données des lignes sélectionnées, et soumettre le form ou faire un ajax

Cela dit, je dois être à moitié stupide (que la moitié stp stp...), je ne comprends pas la structure à laquelle tu penses lorsque tu parles des input hidden. Quand à Ajax, j'ai pas encore touché cette techno sous Joomla!. Peut-être l'a tu essayée?

[SpaceFrog]

sous joomla non, mais peu importe joomla ou autre


Mon idée d'un seul form ( caché on non ) en bas de page ...

dans ton form tu mets un input hidden
au submit tu viens peupler ton input hidden avec une chaine concaténée

ou alors tu viens cloner une série d'input hidden en fonction des ligne sélectionnées

Il y a tellement de façons de faire ...

[JujuPomme]

D'accord ça marche, je vois l'idée.

Je vais essayer de mettre ça en place, au besoin je repasserais ici !

Merci !

[Watilin]

Bonsoir JujuPomme,

j’ai repris le code de ton premier post avec la syntaxe HEREDOC pour le rendre plus clair. Je sais que SpaceFrog t’a donné des conseils entre temps et que ce code n’est probablement pas à jour, mais ça te donnera une idée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
foreach ($results as $row) {
  echo <<<EOT
<form method="post" action="index.php?option=com_content&view=article&id=528&retour=675" id="form_reservation">
  <tr>
    <td class="text-center"> {$row->nom_structure}       </td>
    <td class="text-center"> {$row->nb_places_demandees} </td>
    <td class="text-center">
      <input type="number" id="nb_places_attribuees" name="nb_places_attribuees" value="{$row->nb_places_attribuees}">
    </td>
    <input type="text" name="id_reservation" id="id_reservation" value="{$row->id_reservation}" style="display: none;">
    <td class="text-center">
      <input name="attribution_places" type="submit" class="btn btn-success" value="Attribuer">
    </td>
    <td class="text-center">
      <input type="number" id="nb_places_utilisees" name="nb_places_utilisees" value="{$row->nb_places_utilisees}">
    </td>
    <td class="text-center">
      <input name="places_utilisees" type="submit" class="btn btn-success" value="Confirmer">
    </td>
  </tr>
</form>
EOT;
}

Outre le problème de la <table> brisée, souligné par SpaceFrog, on peut voir un <input> qui traîne en dehors d’un <td>. Même s’il est display: none, ça joue quand même : il est à cet endroit dans le code HTML, il sera à cet endroit dans l’arbre DOM.


Une idée comme ça : pour moi la redondance des boutons n’est pas un problème ; elle peut même être utile à l’UX (expérience utilisateur) ainsi qu’à l’accessibilité, surtout si la table est grande. Demande-toi qu’est-ce qui serait le plus pratique, sur différentes tailles d’écrans (les tables posent toujours problème quand on pense au responsive design), ou encore avec différents types de handicaps. Je vois plusieurs scénarios (lecteur d’écran, loupe d’écran, navigation au clavier) qui me font aboutir à la même conclusion : c’est plus pratique avec des boutons sur chaque ligne de la table. Mais c’est une question de jugement personnel, alors fais-toi ta propre opinion

[JujuPomme]

Une idée comme ça : pour moi la redondance des boutons n’est pas un problème ; elle peut même être utile à l’UX (expérience utilisateur) ainsi qu’à l’accessibilité, surtout si la table est grande. Demande-toi qu’est-ce qui serait le plus pratique, sur différentes tailles d’écrans (les tables posent toujours problème quand on pense au responsive design), ou encore avec différents types de handicaps. Je vois plusieurs scénarios (lecteur d’écran, loupe d’écran, navigation au clavier) qui me font aboutir à la même conclusion : c’est plus pratique avec des boutons sur chaque ligne de la table. Mais c’est une question de jugement personnel, alors fais-toi ta propre opinion

J'avais pas vu cette réponse my baaaad !!!!

Merci pour ton retour, ainsi que pour le bout de code. Depuis ça a pas mal bougé, mais je me renseigne en revanche sur la syntaxe Heredoc qui m'intéresse dans ce cas-là.

Quand à ton idée, elle était viable si cette vue était destinée à des personnes en situation de handicap. Or, manque de chance ici, c'est pour la partie administration. D'ou le souhait que ce soit plus simple et plus rapide !

Merci pour le retour