[RESOLU]formulaires imbriqués dans un tableau

formulaires imbriqués dans un tableau [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 05-09-2020 à 10:27:22    

:hello: tout le forum.
 
J'ai besoin de votre aide.
 
Je voudrais créer ce tableau :
https://zupimages.net/up/20/36/e4sj.jpg
 
Si l'utilisateur clic sur le bouton 1 : ouverture d'un nouvel onglet, de la page x,  qui affiche les caractéristiques du TP N°1
Si l'utilisateur clic sur le bouton R2 : ouverture d'un nouvel onglet, de la page x,  qui affiche les caractéristiques du TP requis R2
 
Si l'utilisateur clic sur le bouton 3 : ouverture d'un nouvel onglet, de la page x,  qui affiche les caractéristiques du TP N°3
Si l'utilisateur clic sur le bouton R4 : ouverture d'un nouvel onglet, de la page x,  qui affiche les caractéristiques du TP requis R4
 
Si l'utilisateur clic sur le bouton Modifier les autorisations : envoie du formulaire, dans la page en cours qui modifie les autorisations.
 
 
Problème de mon code les formulaires sont imbriquées.
Le bouton 1 ne fonctionne pas il envoie vers la page en cours.
Les bouton R2, 3, R4 fonctionnent.
 
 
Voilà mon code (je l'ai simplifié, en réalité chaque ligne de TP est généré par une boucle php)

Code :
  1. <form method="post">
  2.      <table>
  3.           <tbody>
  4.                <tr>
  5.                     <th>N° du TP</th>
  6.                     <th>TP requis</th>
  7.                     <th>Autorisation</th>
  8.                </tr>
  9.                <tr>
  10.                     <td>
  11.                          <form action="pageX.php" target="_blank" method="post">
  12.                               <input type="submit" value="1" name="idTp"/>
  13.                          </form>
  14.                     </td>
  15.                     <td>
  16.                          <form action="pageX.php" target="_blank" method="post">
  17.                               <input type="submit" value="R2" name="idTp"/>
  18.                          </form>
  19.                     </td>
  20.                     <td>
  21.                          <input type="radio" name="autorisation_1" value="1" id="o1"/><label for="o1">Oui</label><br>
  22.                          <input type="radio" name="autorisation_1" value="0" id="n1"/><label for="n1">Non</label>
  23.                     </td>
  24.                </tr>
  25.                <tr>
  26.                     <td>
  27.                          <form action="pageX.php" target="_blank" method="post">
  28.                               <input type="submit" value="3" name="idTp"/>
  29.                          </form>
  30.                     </td>
  31.                     <td>
  32.                          <form action="pageX.php" target="_blank" method="post">
  33.                               <input type="submit" value="R4" name="idTp"/>
  34.                          </form>
  35.                     </td>
  36.                     <td>
  37.                          <input type="radio" name="autorisation_2" value="1" id="o2"/><label for="o2">Oui</label><br>
  38.                          <input type="radio" name="autorisation_2" value="0" id="n2"/><label for="n2">Non</label>
  39.                     </td>
  40.                </tr>
  41.           </tbody>
  42.      </table>
  43.      <input type="submit" value="Modifier les autorisations" name="modifierAutorisation"/>
  44. </form>


 
Comment faire pour réaliser ce tableau sans imbriquer les formulaires et en gardant qu'un seul bouton Modifier les autorisations ?
 
Merci pour votre aide.


Message édité par kewan le 06-09-2020 à 09:22:12
Reply

Marsh Posté le 05-09-2020 à 10:27:22   

Reply

Marsh Posté le 05-09-2020 à 11:47:41    

Bonjour,
 
Pourquoi faire un formulaire pour l'ouverture des TPs ? Pourquoi ne pas juste faire des liens directement vers les TPs ou au pire un lien qui va utiliser la méthode GET pour réclamer le bon TP ?
Tu peux donner des id à tes formulaire et ainsi lier tes inputs à l'id du formulaire souhaité.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 05-09-2020 à 12:02:53    

MaybeEijOrNot a écrit :

Bonjour,
 
Pourquoi ne pas juste faire des liens directement vers les TPs


 
Je ne peux pas faire de lien directement, je n'ai pas de page pour chacun des TP.
Lors de l'envoie du formulaire vers la page X, elle va rechercher les caractéristiques du TP dans une base mysql, en fonction de la valeur de la variable POST idTp envoyée, puis affiche les caractéristiques du bon TP
 
 

MaybeEijOrNot a écrit :

Tu peux donner des id à tes formulaire et ainsi lier tes inputs à l'id du formulaire souhaité.


 
Je ne sais pas comment faire ça. Aurais-tu un exemple ?
 
Merci.

Message cité 1 fois
Reply

Marsh Posté le 05-09-2020 à 12:20:30    

kewan a écrit :

Je ne peux pas faire de lien directement, je n'ai pas de page pour chacun des TP.
Lors de l'envoie du formulaire vers la page X, elle va rechercher les caractéristiques du TP dans une base mysql, en fonction de la valeur de la variable POST idTp envoyée, puis affiche les caractéristiques du bon TP


Dans ce cas là, considérer la seconde partie du message par la méthode GET qui va permettre d'effectuer la même requête au travers de l'url.

 
kewan a écrit :

Je ne sais pas comment faire ça. Aurais-tu un exemple ?

 

Merci.


Code :
  1. <form action="http://www.google.fr" method="POST" id="form1"></form>
  2. <form action="http://www.hardware.fr" method="POST" id="form2"></form>
  3. <input type="submit" value="Submit form #2" form="form2">
  4. <input type="submit" value="Submit form #1" form="form1">

Message cité 1 fois
Message édité par MaybeEijOrNot le 05-09-2020 à 12:21:20

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 05-09-2020 à 12:55:55    

MaybeEijOrNot a écrit :


Code :
  1. <form action="http://www.google.fr" method="POST" id="form1"></form>
  2. <form action="http://www.hardware.fr" method="POST" id="form2"></form>
  3. <input type="submit" value="Submit form #2" form="form2">
  4. <input type="submit" value="Submit form #1" form="form1">



 
Top  :jap: , je ne connaissait pas cette méthode, merci.
 

Code :
  1. <form method="POST" id="form1"></form>
  2. <form method="POST" action="x" id="form2" target="_blank"></form>
  4. <table class="tb1">
  5. <tbody>
  6.  <tr>
  7.   <th>N° du TP</th>
  8.   <th>TP requis</th>
  9.   <th>Autorisation</th>
  10.  </tr>
  11.  <tr>
  12.   <td>
  13.    <input type="submit" value="1" name="idTp" form="form2"/>
  14.   </td>
  15.   <td>
  16.    <input type="submit" value="R2" name="idTp" form="form2"/>
  17.   </td>
  18.   <td>
  19.    <input type="radio" name="autorisation_1" value="1" form="form1" id="o1"/><label for="o1">Oui</label><br>
  20.    <input type="radio" name="autorisation_1" value="0" form="form1" id="n1"/><label for="n1">Non</label>
  21.   </td>
  22.  </tr>
  23.  <tr>
  24.   <td>
  25.    <input type="submit" value="3" name="idTp" form="form2"/>
  26.   </td>
  27.   <td>
  28.    <input type="submit" value="R4" name="idTp" form="form2"/>
  29.   </td>
  30.   <td>
  31.    <input type="radio" name="autorisation_2" value="1" form="form1" id="o2"/><label for="o2">Oui</label><br>
  32.    <input type="radio" name="autorisation_2" value="0" form="form1" id="n2"/><label for="n2">Non</label>
  33.   </td>
  34.  </tr>
  35. </tbody>
  36. </table>
  37. <input type="submit" value="Modifier les autorisations" name="modifierAutorisation" form="form1"/>


 
 
 
 
J'ai trouvé cette solution en parcourant le net :
 


Dans ma balise form j'ai mis action="x.php" target="_blank" pour les boutons des TP
 
Pour le bouton Modifier les autorisations : formaction="" formtarget="" pour prendre le pas sur la balise form est envoyer le formulaire sur la page en cours.
 

Code :
  1. <form method="post" action="x.php" target="_blank">
  2.  <table class="tb1">
  3.   <tbody>
  4.    <tr>
  5.     <th>N° du TP</th>
  6.     <th>TP requis</th>
  7.     <th>Autorisation</th>
  8.    </tr>
  9.    <tr>
  10.     <td>
  11.      <input type="submit" value="1" name="idTp"/>
  12.     </td>
  13.     <td>
  14.      <input type="submit" value="R2" name="idTp"/>
  15.     </td>
  16.     <td>
  17.      <input type="radio" name="autorisation_1" value="1" id="o1"/><label for="o1">Oui</label><br>
  18.      <input type="radio" name="autorisation_1" value="0" id="n1"/><label for="n1">Non</label>
  19.     </td>
  20.    </tr>
  21.    <tr>
  22.     <td>
  23.      <input type="submit" value="3" name="idTp"/>
  24.     </td>
  25.     <td>
  26.      <input type="submit" value="R4" name="idTp"/>
  27.     </td>
  28.     <td>
  29.      <input type="radio" name="autorisation_2" value="1" id="o2"/><label for="o2">Oui</label><br>
  30.      <input type="radio" name="autorisation_2" value="0" id="n2"/><label for="n2">Non</label>
  31.     </td>
  32.    </tr>
  33.   </tbody>
  34.  </table>
  35.  <input type="submit" value="Modifier les autorisations" name="modifierAutorisation" formaction="" formtarget=""/>
  36. </form>


 
Qu'en pensez vous ?


Message édité par kewan le 05-09-2020 à 15:11:56
Reply

Marsh Posté le 05-09-2020 à 14:02:25    

Oui c'est aussi bien par rapport au form id, mais je pense qu'en même que le formulaire sous cette forme n'est pas vraiment approprié au chargement des TPs. En effet, on a là des boutons d'actions et non vraiment un formulaire. De plus, la méthode GET permet à l'utilisateur de ne pas utiliser le formulaire, très utile par exemple pour partager un lien vers le TP.

 

Pour faire simple, avec la méthode GET, les données se trouvent dans le lien, ex : http://www.example.com/pageX.php?donnees1=mes_donnees1&donnees2=mes_donnees2
Et derrière le fichier PHP peut récupérer les données et afficher le bon TP.

 


EDIT : et évidemment avec un peu de CSS on peut déguiser notre lien de manière à créer un bouton.
EDIT2 : https://codepen.io/Perrier_ChouFleur/pen/BaKJyJy (version avec un peu de Javascript pour chipoter)


Message édité par MaybeEijOrNot le 05-09-2020 à 15:23:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 06-09-2020 à 09:21:48    

Top, merci pour tes réponses :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed