Bonjour à tous,

Je me permets de de poster car je ne sais pas comment résoudre mon problème.

Je tente de mettre en place un bouton pour supprimer un article dans une liste plus ou moins longue.

Ne sachant pas combien il y a d'article j'ai mis en place une boucle assez large pour reproduire le maximum de possibilité.

Voici a quoi ressemble mon code.

Code HTML / PHP

<form method="post" id="remove-form-<?= $compteur?>" class=" remove-form justify-content-center align-items-center d-flex">
                                    <input type="hidden" name="" class="idx" id="idx-<?= $compteur?>" value="<?= $panier_article['idx_article'] ?>">
                                    <div class="p-0 m-0 d-flex justify-content-center align-items-center">
                                        <button type="submit" id="remove-<?= $compteur ?>" class="remove">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                                <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                                            </svg>
                                        </button>
                                    </div>
                                </form>

et voici mon code javascript:

 for(compt = 0; compt < 3 ; compt++){
        $('#remove-form-' + compt).submit(function (e) { 
            e.preventDefault();
            console.log($('#idx-' + compt).val());
        });
    };

 Je n'arrive pas en console a avoir la valeur du bouton sélectionné "Undifine" quand je clique sur le bouton N°3

Merci d'avance pour votre aide

-
Edité par MiaoLee 22 mars 2024 à 19:36:30

Bonjour,

Ton problème vient de la logique de programmation, en fait il se produit car la variable compt est partagée entre toutes les itérations de la boucle et toutes les fonctions de rappel. Lorsque les fonctions de rappel sont exécutées (ici, lorsque le formulaire est soumis), elles utilisent la dernière valeur de compt, qui, dans ton cas initial, est la dernière valeur après que la boucle se termine.

Du coup j'imagine que soit t'as omis ce fait, soit il y a un réel problème de logique, utilise le `let` derrière le compte

C'est un peu complexe, car je pense pas avoir bien expliquer, mais en corrigeant tu vas comprendre je crois, essaie ça:

for (let compt = 0; compt < 3; compt++) {
    $('#remove-form-' + compt).submit(function(e) {
        e.preventDefault();
        console.log($('#idx-' + compt).val());
    });
}

Et va t'informer sur la portée des variables en JavaScript

Bien à toi

Bonjour,

Et merci pour ton aide je viens de modifier et ca ne fonctionne que sur la première occurence

Et pas sur les autres j'ai légèrement modifier.

for (let compt = 0; compt < 20; compt++) {
        $('#remove-form-' + compt).submit(function(e) {
            e.preventDefault();
            console.log($('#idx-' + compt).val());
        });
 }

Hello

Plutôt que de t'embêter à boucler pour attacher un événement sur chaque form (ce qui en plus n'est pas performant), je te suggère de tirer partie du principe de délégation d'événement.

$(document).on('submit', 'form[id^=remove-form]', function(event) {
  event.preventDefault();
  console.log($(this).find('[id^=idx-]').val());
})

(Démo fonctionnelle ici)

L'écouteur d'événement est placé sur le document, et la méthode $(…).on n'appellera la callback que si le sélecteur 'form[id^=remove-form]' matche avec l'élément qui a déclenché le submit.

Ensuite, il suffit d'utiliser $(this) et faire du traversing (.find) pour trouver l'input et récupérer sa valeur.

-
Edité par ninjavascript 24 mars 2024 à 12:33:18