Mettre une form dans une table

Version imprimable

Bonjour à tous,

Je viens de véifier une site sur W3C.

J'ai une table avec un 20ène de lignes. Chaque ligne correspond a ue information sur un échantillon. Et sur chaque ligne j'ai un bouton submit, pour modifier l'information de l'échantillon.

J'ai donc un formulaie par ligne. Ca ressemble a ceci:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<table id="listLables" class="table">
  <thead>
    <tr>
      <th>id_label</th>
        <th>Glacier</th>
        <th>Location</th>
        <th>Type</th>
        <th>Replica</th>
        <th>Box</th>
        <th>is in</th>
        <th>is out</th>
        <th>is analized</th>
        <th>Comment</th>
        <th></th>
        </tr>
        </thead>
        <tbody>
          <form data-role="save-label" data-id="1" id="form-1" method="get">
            <tr>
              <td>1 <input type="hidden" name="id" value="1"> 
              </td>
              <td>GL1</td>
              <td>UP</td>
              <td>sDNA</td>
              <td>1A</td>
              <td>
                <select name="box-1">
                  <option id="1-2" value="2" >
                    Box 1                
                  </option>
                  <option id="1-3" value="3" >
                    Box 2                
                </option>
                <option id="1-4" value="4" >
                  Box 3
                </option>
                <option id="1-5" value="5" >
                  Box 4                
                </option>
                <option id="1-1" value="1" selected>
                  None                
                </option>
              </select>
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isin-1" name="isin-1" value="0" />
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isout-1" name="isout-1" value="0" /></td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isanalized-1" name="isanalized-1" value="0" />
            </td>
            <td>
              <input class="md-inp" type="text" id="comment-1" name="comment-1" value="" />
            </td>
            <td>
              <input type="submit" id="submit-1" value="Save" />
            </td>
          </tr>
        </form>
 
        <form data-role="save-label" data-id="2" id="form-2" method="get">
          <tr>
            <td2 <input type="hidden" name="id" value="2"> 
            </td>
            <td>GL1</td>
            <td>UP</td>
            <td>sDNA</td>
            <td>1A</td>
           [... suite des td ..]
        </tr>
      </form>
    </tbody>
  </table>

Quand je le passe sur W3C, j'ai ce message d'erreur

Citation:

Element form not allowed as child of element tbody in this context. (Suppressing further errors from this subtree
Stray end tag form

Je suis un peu surpris car j'ai vérifier mon code et il n'y a pas d'élément qui se "mange" du genre

Code:

1
2
3
4
5
6
7
8
<table>
<form>
<tr>
<td>
</td>
</form>
</tr>
</table>

J'en conclu que le formulaire doit etre en dehors de <table>, mais ci c'est bien le cas, comment puis-je avoir un formulaire avec un bouton submit par ligne???

Merciii!

31/01/2019, 19h32
NoSmoking
Bonjour,

Citation:

Envoyé par pierrot10

Je suis un peu surpris car j'ai vérifier mon code et il n'y a pas d'élément qui se "mange" du genre

ben si justement !!!
Code:

1 2 3 <tbody> <form data-role="save-label" data-id="1" id="form-1" method="get"> <tr> 
Citation:

J'en conclu que le formulaire doit etre en dehors de <table>, mais ci c'est bien le cas, comment puis-je avoir un formulaire avec un bouton submit par ligne???

Et il est où l'intérêt dans ton cas, il n'y a pas d'action sur tes <form> ?
31/01/2019, 21h14
Invité
Bonjour,

Explique-nous d'abord comment tu comptes effectuer le traitement :
- En PHP : clic sur le bouton -> accès à la page de traitement PHP (donc avec rechargement de la page) ?
- Sans rechargement de page, via JavaScript/Ajax ?
- Une seule ligne à la fois ?
- Plusieurs lignes en même temps ?
Les solutions à mettre en place sont différentes.

N.B. Dans ton cas de figure, une solution "simple" consiste à :
- Remplacer les <table>, <tr>, <td> par des <div>,
- Et d'appliquer en CSS des display:table / table-row / table-cell, pour simuler le même fonctionnement.
01/02/2019, 09h22
pierrot10
Bonjour,.

Merci pouir vous eéponses.

Citation:



D'accord, je ne le savais pas mais j'ai en effet essayer de faire comme ceci
Code:

1 2 3 4 5 6 7 8 <tbody> <tr> <form> <td> </td> </form> </tr> </tbody>
Pour répondre a jeraux62, en effaet, j'aurais du le préciser, il n'y a pas d'action car, le formulaire est envoyer avec ajax, et une ligne à la fois.
Donc a chaque fois qu'on met en échantillon à jour, on modifie la ligne et on sauve. Il me faut donc un formulaire par ligne.

Citation:

Remplacer les <table>, <tr>, <td> par des <div>

Oui je vais le faire. J'y avais penser et ca me semble mieux, en effet
01/02/2019, 10h33
Invité

Si le traitement se fait avec Ajax, tu n'as pas besoin des balises <form>.

Problème résolu.

N.B. Par contre, il te faut alors bien identifier - et cibler - les champs de la ligne concernées.
Avec un data-id sur chaque input submit.

Salut Jereaux,
D'accord. J'ai tout refait avec des div et je me "grave la tete.
Dans mon cas j'ai 11 colonnes et une 30ene de ligne. J'ai aussi défini des largeurs pour chaque colonne, du genre
Code:

1 2 3 4 5 .divTableCell:nth-child(2){ width:200px; background-color: green; }
Si je comment ma forme
Code:

1 2 3 // echo '<from>' //echo '</form>'
L'affiache est très bien.
Si je décommente. les deux lignes qui n'ont pas de forme (soit la première ligne qui contient les titres des colonnes) et la dernière qui es identique que la première, les largeurs sont disproprtionnées et peu comme si j'avais mis par erreur une colonne en plus.

En d'autre terme le CSS que j'ai chois, n'aime pas la basile forme. Je ne peux pas montrer la source de la page que je suis dérrière un firewall, mais en gros c'est a, avec 30 lignes
https://divtable.com/generator/
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 /* DivTable.com */ .divTable{ display: table; width: 100%; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; } .divTableCell:nth-child(1){ width:20px !important; background-color: red; } .divTableCell:nth-child(2){ width:200px; background-color: green; } .divTableCell:nth-child(3){ width:80px; background-color: yellow; } .divTableCell:nth-child(4){ width:100px; background-color: #ff22ff; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div> <div class="divTableCell"> </div>
Ceci dit, j'aimeraqis bien garder ma balise form, car je ne sais pas encore si au final, je ferai ceci avec ajax. C'est mon but, mais je crais rencontrer d'autres difficultés qui me pousseront a ne plus utiliser ajax. Donc pour le moment, je vais supprimer la balise forme, mais je rsique de devoir résoudre ce problème plus tard.

01/02/2019, 11h17
pierrot10

En fait, il faut que je garde my balise form. Je me rend compte que ca devient trop compliqué a modifier tout code javascript/ajax. Il faut que je comprenne pourquoi, ma balise <form> "casse" ma scrture :roll:

Citation:

Envoyé par pierrot10

...il faut que je garde my balise form...

Non.
Et Ajax est une bonne solution.

Si je reprends la structure initiale *, en enlevant les balises <form> :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
            <tr>
              <td>1</td>
              <td>GL1</td>
              <td>UP</td>
              <td>sDNA</td>
              <td>1A</td>
              <td>
                <select name="box-1">
                  <option id="1-2" value="2" >
                    Box 1                
                  </option>
                  <option id="1-3" value="3" >
                    Box 2                
                </option>
                <option id="1-4" value="4" >
                  Box 3
                </option>
                <option id="1-5" value="5" >
                  Box 4                
                </option>
                <option id="1-1" value="1" selected>
                  None                
                </option>
              </select>
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isin-1" name="isin-1" value="0" />
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isout-1" name="isout-1" value="0" /></td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isanalized-1" name="isanalized-1" value="0" />
            </td>
            <td>
              <input class="md-inp" type="text" id="comment-1" name="comment-1" value="" />
            </td>
            <td>
              <input type="submit" id="submit-1" value="Save" data-id="1" class="save-me" />
            </td>
          </tr>

On obtient une structure HTML VALIDE
+ Tu remarqueras sur l'input submit le data-id et la classe :

Code:

<input type="submit" id="submit-1" value="Save" data-id="1" class="save-me" />

Où "1" est l'identifiant de la ligne (en général, on utilise l'id auto-incrémenté de la ligne, dans table SQL)

En jQuery, ça donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
$('.save-me').on('click', function(){
   // 1- on récupère l'id dans le data-id de l'input
  var id = $(this).data('id');
  // 2- on récupère les données de la ligne
  var box = $('box-'+id).val();
  var isin = $('isin-'+id).val();
  var isout = $('isout-'+id).val();
...
   // 3- on peut faire le traitement Ajax
...
});

* Ça fonctionne aussi avec les <div>.

OK, j'a résolu mon problème en faisant ainsi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div class="div-table">
<div class="div-table-row">
 
          <div class="div-table-col">ID</div>
          <div class="div-table-col">Glacier</div>
          <div class="div-table-col">Location</div>
          <div class="div-table-col">Type</div>
          <div class="div-table-col">Replica</div>
          <div class="div-table-col">Box</div>
          <div class="div-table-col">In</div>
          <div class="div-table-col">Out</div>
          <div class="div-table-col">Analized</div>
          <div class="div-table-col">Comment</div>
          <div class="div-table-col">ff</div>
</div>
</div>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
.div-table {
  display: table;
  width: 100%;
	border-collapse: collapse;
}
.div-table-row {
  display: table-row;
	border-bottom: 1px dotted #666666	;
 
	clear: both;
}
.div-table-col {
  float: left;
  display: table-cell;
	padding: 10px 10px;
	height: 45px;
	vertical-align:middle;
}
 
 
 
	.div-table-row:nth-child(1){
		background-color: #aaa;
		color:white;
	}
	.div-table-col:nth-child(1){
		width:50px;
	}
	.div-table-col:nth-child(2){
		width:80px;
	}
	.div-table-col:nth-child(3){
		width:80px;
	}
	.div-table-col:nth-child(4){
		width:80px;
	}
	.div-table-col:nth-child(5){
		width:80px;
	}
	.div-table-col:nth-child(6){
		width:110px;
	}
	.div-table-col:nth-child(7),.div-table-col:nth-child(8),.div-table-col:nth-child(9){
		width:90px;
	}
	.div-table-col:nth-child(10){
		width:250px
	}
	.div-table-col:nth-child(11){
		width:80px
	}

J'ai inclu la form et a marche bien!!

Merci pour votre aide et tout bon week-end