Récupérer et exploiter une valeur d'input

Version imprimable

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:

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.

02/04/2020, 19h36
psychadelic

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

Oui toutes les lignes sont identiques

Code:

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

02/04/2020, 23h28
ProgElecT

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

Code:

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

devrait être (me semble t-il)

Code:

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

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

Code:

<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 :oops:
Code:

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:

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

Merci à vous deux ...

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

par exemple pour le css

Code:

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

devient

Code:

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

avec en css

Code:

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

par exemple avec pour le javascript

Code:

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

devient

Code:

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

+css

Code:

td img { cursor:pointer; }

+JS

Code:

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:

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:

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:

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

04/04/2020, 00h36
JPBruneau

Trop fort !! mille mercis et quelle patience à me consacrer tout ce temps Mille-Mille Mercis :oops: