Discussion :

[JPBruneau]

Bonjour,
je butes sur un problème probablement simple ;
dans une page HTML5 Ajax, j'ai un tableau de 50 lignes dans une table pour certaines cellules, j'ai besoins de pouvoir saisir et valider une valeur numérique
il y a un bouton avec un "onclic" ...et un "input" qui n'est donc pas dans un "FORM".... le fonction appelée reçoit donc un code et il me faut récupérer la valeur saisie..

mon code est

Code :

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

1
2
3
4
5
6
7
8
 
function pochette(xx){  
 
/*  xx est $DvdIndex qui m'a servie à nommer l'idé de chaque input */
var Leinput="X"+xx+"";
var wx=document.getElementById.value('".Leinput."');
maFonctionAjax("","","lapochette","","",xx,wx,"","","","","","","");
}

il me crée un erreur mal définie, comment auriez vous récupéré le contenu de l"input ? merci d'avance.

[psychadelic]

pour mieux répondre faudrait d'abord savoir comment se présente ton input dans le body de ton html..

[JPBruneau]

Oui toutes les lignes sont identiques

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<table border="1px"><tbody><tr><td width="80px"> Index </td><td width="150px"><input type="button" value=" Date claire " onclick="LeTri('DvdDateClaire');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="600px"><input type="button" value=" Titre " onclick="LeTri('DvdTitre');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="150px"><input type="button" value=" Pochette " onclick="LeTri('Pochette');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="200px"><input type="button" value=" USB_Rep " onclick="LeTri('USB0');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="150px"><input type="button" value=" USB1 " onclick="LeTri('USB1');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="150px"><input type="button" value=" Taille " onclick="LeTri('DvdTaille');return false;"><br><img src="logossmala/s_non.gif" alt=""></td><td width="150px"><input type="button" value=" DvdIndex " onclick="LeTri('DvdIndex');return false;"><br><img src="logossmala/s_non.gif" alt=""></td></tr><tr>
     <td> 3394 Genere </td>
     <td>2020-03-11</td>
     <td align="left">demain-le-film.mp4</td>
     <td><img src="zzz/bout1.jpg" onclick="javascript:pochette('3394');'="" alt="3394" style="cursor:pointer;">
     <input class="le413" maxlength="10" name="X3394" id="X3394" type="text" value="11"></td>
     <td>3031 DVDd</td>
     <td>00x</td>
     <td>1.079.879.585</td>
     <td>3394</td></tr><tr>

Merci à toi

[ProgElecT]

Salut
N'y a-t-il pas un problème de "
Ton code ligne 5

Code HTML :

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

     <td><img src="zzz/bout1.jpg" onclick="javascript:pochette('3394');'="" alt="3394" style="cursor:pointer;">

devrait être (me semble t-il)

Code HTML :

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

     <td><img src="zzz/bout1.jpg" onclick="javascript:pochette('3394');'='" alt="3394" style="cursor:pointer;">

[JPBruneau]

Ah oui j'ai avancé d'un pas mille mercis

Code html :

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

 <td><img src="zzz/bout1.jpg" onclick="javascript:pochette('3394');'='" alt="3394" style="cursor:pointer;">

De ce fait j'ai corrigé également le code coté HTML de l'Ajax (la fonction javascript

Code :

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

1
2
3
4
5
6
7
function pochette(xx){  
 
/*  xx est $DvdIndex  */
var Leinput="X"+xx+"";
var wx=document.getElementById('+xx+').value('"+Leinput+"');
maFonctionAjax("",xx,"lapochette","","","","wx","","","","","","","");
}

mais il réponds qu'il trouve une valeur nulle ... j'avais tapé 150 à la place de cette ligne ...
Finalement, j'ais mis un mini form a chaque ligne et ça marche !! (à l'ancienne)

Code :

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

  onsubmit='pochette(this.X".$DvdIndex.".value,  ETC. a lancienne

Merci à vous deux ...

[psychadelic]

quelques conseils
1-> ne pas mélanger le CSS , le HTML et javascript doivent être séparés.

par exemple pour le css

Code HTML :

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

1
2
      <tr>
        <td width="80px"> Index </td>

devient

Code HTML :

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

1
2
      <tr>
        <td> Index </td>

avec en css

Code CSS :

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

td:nth-of-type(1) {  width:80px }

par exemple avec pour le javascript

Code HTML :

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

<td> <img src="zzz/bout1.jpg" onclick="javascript:pochette('3394');'="" alt=" 3394" style="cursor:pointer;">

devient

Code HTML :

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

<td> <img src="zzz/bout1.jpg"  alt=" 3394" id=imgXX>

+css

Code CSS :

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

td img  { cursor:pointer; }

+JS

Code :

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

document.getElementById('imgXX').onclick = function (....

dans le cas d'un tableau, comme les lignes se répettent il est utile d'utiliser la délégation d'évènements. un exemple ici => https://www.developpez.net/forums/d2.../#post11457648

et tant qu'a utiliser un tableau ne pas hésiter à utiliser le <thead>ce qui dans ton histoire se résume ainsi:

Code HTML :

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
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
<table id="ma-table">
  <thead>
    <tr>
      <td>Index </td>
      <td>
        <button value="DvdDateClaire"> Date claire </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="DvdTitre"> Titre </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="Pochette"> Pochette </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="USB0"> USB_Rep </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="USB1"> USB1 </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="DvdTaille"> Taille </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
      <td>
        <button value="DvdIndex"> DvdIndex </button> <br> <img src="logossmala/s_non.gif" alt="">
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 3394 Genere </td>
      <td>2020-03-11</td>
      <td>demain-le-film.mp4</td>
      <td>
        <img src="zzz/bout1.jpg" alt=" 3394" data-pochette="3394">
        <input type="text" name="X3394" class="le413" maxlength="10"  value="11">
      </td>
      <td>3031 DVDd</td>
      <td>00x</td>
      <td>1.079.879.585</td>
      <td>3394</td>
    </tr>
    <tr>
      <td> 2222 Genere </td>
      <td> 2001-03-11</td>
      <td> odyssee-de_l-espace.mp4</td>
      <td>
        <img src="zzz/bout1.jpg" alt=" 2222" data-pochette="2222">
        <input type="text" name="X2222" class="le413" maxlength="10"  value="222">
      </td>
      <td>2222 DVDd</td>
      <td>00x</td>
      <td>2.222.022</td>
      <td>2222</td>
    </tr>
    <tr>
  </tbody>
</table>

Code CSS :

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

1
2
3
4
5
6
7
#ma-table thead td  {  width:150px; }
#ma-table thead td:nth-of-type(1) {  width:80px }
#ma-table thead td:nth-of-type(3) {  width:600px }
#ma-table thead td:nth-of-type(5) {  width:200px }
 
#ma-table tbody td:nth-of-type(3) { text-align: left; }
#ma-table tbody img { cursor:pointer; }

Code JAVASCRIPT :

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
const maTable = document.getElementById('ma-table');
 
maTable.querySelector('thead').onclick=e=>
  {
  if (!e.target.matches('button')) return
  // console.log( e.target.value )
  LeTri(e.target.value)
  }
maTable.querySelector('tbody').onclick=e=>
  {
  if (!e.target.matches('img[data-pochette]')) return
 
  let valInput = e.target.parentNode.querySelector('input').value;
 
  // console.log(e.target.dataset.pochette, valInput)
  maFonctionAjax("",e.target.dataset.pochette,"lapochette","","","",valInput,"","","","","","","");
  }