Discussion :

[Derko]

Bonjour !

Je bloque depuis un moment sur un problème qui j'en suis sur est tout bête. Mais quand ça ne veut pas, ça ne veut pas...

Je code actuellement un panier pour mon site internet (je débute). Dans ce panier, j'ai les éléments que l'utilisateur a ajouté lors de sa navigation sur le site. Pour chaque élément, j'ai un input type number, avec une class/id du type : id="maVariable_$idProduit". Pour afficher tout cela, j'utilise une boucle while, après avoir récupérer les données souhaitées depuis ma BDD (j'utilise une BDD au lieu d'un cookie ou du cache navigateur pour le moment).

Pour plus de clarté, prenons l'exemple ci-dessous :

Rendu visuel :


Code HTML / PHP :

Code PHP :

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
while ($produit = $item->fetch())
{
    $total = $produit['prix']*$caddyItems['quantite'];
 
    echo'
    <tr>
        <td>X</td>                                                          
        <td>'.$produit['name'].'</td>                                                    
        <td><input type="number" name="quantite" class="modifQ_'.$produit['id'].' quantite" id="quantite'.$produit['id'].'" value="'.$caddyItems['quantite'].'">
            <br>
            <input type="submit" name="modifier" class="modifQ_'.$produit['id'].' modifier" id="modifier_'.$produit['id'].'" value="Modifier">
        </td>                                                           
        <td>'.$produit['prix'].'</td>                        
        <td>'.$total.'</td>
    </tr>';
}

Donc, ce que j'aimerai, c'est que lorsque l'utilisateur, après avoir inscrit une nouvelle quantité dans l'input number "modifQ_$idProduit", clique sur l'input submit "modifier_$idProduit", que JS récupère le bouton sur lequel on a cliqué (jusque là, pas de soucis) et me récupère la value="'.$caddyItems['quantite'].'" de l'input number correspondant à ce bouton (donc le produit concerné).

Code JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready( function () 
{
    $('.modifier').on('click', function() 
    {
        var idItem = $(this).attr('class');
        var newQuantity = $('.quantite').attr('value');
 
        console.log(idItem); // affiche bien "modifQ_$idProduit"
        console.log(newQuantity); // affiche 5 (soit la value du premier input)
    });
});

Évidemment cela ne fonctionne que sur le premier input number étant donné que la class "quantite" n'est pas incrémentée, il prend la première qui vient. Donc peu importe sur quel bouton je clic, on affichera toujours 5. Mon problème est donc de réussir à faire le lien entre chaque bouton et chaque input number associé en appelant une classe incrémentée (ou autres solutions !).
Je ne trouve pas de solution. C'est pourtant tout bête, j'en suis convaincu...

J'espère avoir été clair.
Si quelqu'un sait m'aider, je suis preneur.
Je vous remercie d'avance pour votre temps !
Passez une bonne soirée

Cordialement,
Xerkes.

[mathieu]

comme vous l'avez compris le sélecteur ".quantite" va retourner toutes les balises ayant cette classe.
donc si vous voulez le nombre dans la balise à côté du bouton, une possibilité est de commencer par chercher la balises "td" parente du bouton. et ensuite la 2e étape est chercher la balise ".quantite" qui est dans cette balise td.
la 1re étape peut être faite avec la méthode closest
https://developer.mozilla.org/fr/doc...lement/closest
et ensuite la 2e étape avec getElementsByClassName :
https://developer.mozilla.org/fr/doc...ntsByClassName

je vous ai proposé du code qui n'utilise plus jquery puisque cette bibliothèque n'apporte plus grand chose par rapport à du code javascript direct.
je vous conseille aussi de mettre des classes css aux différents balises td si vous avez prévu de les utiliser dans la suite du code.

[SpaceFrog]

Avec JQuery tu peux utiliser le selecteur id^= qui signifie "id commence par"

Code :

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

$("[id^='monId']")

Qui retournera alors la collection des éléments dont l'id commence par "monId"

Ou pour un element en particulier

Code :

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

$("#monId_"+ NrId )

NrId étant une variable ...
Qui retournera alors seulement l'élément dont l'id est minId_[nr]

[Derko]

Bonjour à vous

Un gros merci pour l'aide apportée.
Grâce à vos conseils j'ai pu trouver une solution qui fonctionne parfaitement.

J'ai gardé le JQuery car j'avoue ne pas bien faire la différence entre le JS 2023 et le JQuery. Dans mes souvenirs (lointains) JS me fait très peur... Je revois des centaines de lignes de codes incompréhensibles pour le moindre besoin. J'en ai une peur bleu :p

Bref ! Voici la solution que j'ai trouvé :

Code JQuery :

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Modifier la quantité d'un item dans le caddy
$(document).ready( function () 
{
    $('.modifier').on('click', function() { // Au clic sur un élément
        var idItem = $(this).attr('class'); // on récupère la class de cet élément
        var parent = $(this).closest('td'); // on récupère l'élément parent td de cet élément
        var newQuantity = $(parent).find('.quantite').attr('value'); // on récupère la value de l'enfant avec la classe .quantite de ce parent
 
        console.log(idItem); // Affiche bien la class de l'élément cliqué
        console.log(parent); // Affiche bien le TD parent de l'élément cliqué
        console.log(newQuantity); // Affiche bien la value de l'enfant avec la class .quantite du parent ci-dessus
    });
});

Pourriez-vous me confirmer que cette méthode est W3C valide (histoire de ne pas apprendre du vent) ?
J'attends confirmation avant de passer le post en résolu

Merci encore à vous deux !

Cordialement,
Xerkes.

[Pytet]

Tu ne devrais pas avoir peur de JS, le JavaScript moderne ressemble beaucoup à jQuery.
Tu peux voir les différences entre JS et jQuery sur le site https://youmightnotneedjquery.com/

Ta solution est fonctionnelle mais elle est dépendante de la structure html : si tu modifies ta structure html et/ou que tu remplaces les balises td par d'autres balises, ton script js ne fonctionnera plus.
Pour cette raison, je préfère la solution proposée par SpaceFrog.
L'utilisation des attributs personnalisés data-* pourrait aussi de permettre de cibler plus facilement les éléments dans ton script.
Au passage, préfère l'utilisation d'un input type="button" à la place d'un input type="submit" si tu n'as pas de formulaire.
Pour exemple : https://jsfiddle.net/L1v9368t/

[Derko]

Tu peux voir les différences entre JS et jQuery sur le site https://youmightnotneedjquery.com/

Incroyable ce site. On devrait l'épingler dans tous les forums JQuery / JS en vrai. J'avais déjà fait des recherches pour voir les nouvelles différences mais aucun sites n'étaient aussi clair et concis.

Au passage, préfère l'utilisation d'un input type="button" à la place d'un input type="submit" si tu n'as pas de formulaire.

Je prends note, je ne savais pas.

Pour cette raison, je préfère la solution proposée par SpaceFrog.
L'utilisation des attributs personnalisés data-* pourrait aussi de permettre de cibler plus facilement les éléments dans ton script.

Pour tout dire, je ne comprends pas trop le fonctionnement des data-*
Je constate que ça fonctionne, mais je ne saurais l'expliquer clairement.
Je vais voir pour trouver une doc correcte.


EDIT
Ce que je ne comprends pas dans ton code Pytet, c'est ce passage :

Code JS :

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

1
2
button.addEventListener('click', (e) => {
    const inputQuantite = document.querySelector('input[id="quantite' + e.target.dataset.id + '"]')

Je comprends comme cela :
1- On écoute l'événement click sur un bouton (modifier dans mon cas).
2- (e) => : je ne comprends pas ce (e)
3- La nouvelle quantité inscrite par l'utilisateur est stockée dans inputQuantite via une sélection de l'input ayant pour ID : quantite + e (toujours ce (e) que je ne comprends pas).

Du coup j'ai fait ceci (fonctionnel 100%) :

Code JS :

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
$(document).ready( function()
{
    $('.modifier').on('click', function() {
 
        const idItem = $(this).attr('id');
        var recupId = document.getElementById(idItem); 
 
        const inputQuantite = document.querySelector('input[id="quantite_' + recupId.dataset.id + '"]')
 
        if (inputQuantite) {
          let quantite = inputQuantite.value;
          console.log(quantite);
        }
 
    });
});

J'ai bien conscience que ça doit être super moche pour des pro, mais ça fonctionne encore mieux que mon ancien code qui lui ne prenait pas en compte la modification par l'utilisateur de mon input number.
Je vais garder ça, et finir ma fonction.


Merci !

Cordialement,
Xerkes.

[mathieu]

la notation avec la flèche est un raccourci pour les déclarations de fonctions.
par exemple les 3 fonction suivantes sont (presque) équivalentes

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
function (evenement) {
	// ici du code
}
 
(evenement) => {
	// ici du code
}
 
evenement => {
	// ici du code
}

les accolades peuvent aussi être retirées s'il y a une seule ligne et cela équivaut à "return" comme cela :

Code javascript :

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

1
2
3
4
5
function (evenement) {
	return evenement["attribut"];
}
 
evenement => evenement["attribut"]

il y a une différence entre les 2 notations par rapport à certaines variables spéciales comme "this". vous pouvez trouver plus de détails là :
https://developer.mozilla.org/fr/doc...rrow_functions

[NoSmoking]

Bonjour,

J'ai bien conscience que ça doit être super moche pour des pro, ...

Il n'est pas de savoir si le code est « moche » mais si il est cohérent !

Le mélange des deux n'est pas forcément, voire jamais, ce que l'on fait de mieux au niveau de la cohérence, on utilise soit l'un soit l'autre, mais d'abord quelques remarques

• Ne pas sous-estimer le nom des variables, ainsi
  

  Code :

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

  var recupId = document.getElementById(idItem);

  ... serait avantageusement à remplacer par :
  

  Code :

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

  var recupElement = document.getElementById(idItem);

• une iD étant unique inutile d'en rajouter dans le sélecteur
  

  Code :

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

  const inputQuantite = document.querySelector('input[id="quantite_' + recupId.dataset.id + '"]')

  ... pourrait être simplement
  

  Code :

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

  const inputQuantite = document.getElementById("quantite_" + recupElement.dataset.id);

Ceci étant la logique, ou la compréhension de ce que l'on fait, n'est pas non plus à négliger.

Reprenons ces deux lignes :

Code :

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

1
2
const idItem = $(this).attr('id');                  //(1)
var recupId = document.getElementById(idItem);      //(2)

(1) tu récupères l'ID de l'élément venant d'être cliqué
(2) tu récupères l'élément qui a pour iD idItem

... n'as-tu pas l'impression que c'est le même !!!!

Désolé, mais je ne pouvais pas laisser cela passer