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,"","","","","","","");
  }