Déclancher une action sur un index dans un formulaire

Bonjour

Quand je lance ce formulaire j'ai plusieurs lignes de résultats pour chaque éléments du formulaire.

Je souhaite faire une fonction (rajouter +1 )sur une des lignes de résultat en déclenchant sur l'id ('a')

Malheureusement l'opération ne se fait que sur la première ligne

En parcourant le formulaire avec une boucle cette fois ci je rajoute 1 à chaque ligne de résultats

Comment faire l'opération uniquement pour la migne sélectionnée

Merci d'avance

Mon formulaire

<form class="uk-form" method="post" action="" id="panier" name="panier">
                        <table class="uk-table">
                            <tr>
                                <th class="uk-text-center">Vignette</th>
                                <th class="uk-text-center">Index Photo</th>
                                <th class="uk-text-center">Référence Photo</th>
                                <th class="uk-text-center">Quantité </th>
                                <th class="uk-text-center">Prix Unitaire </th>
                                <th class="uk-text-center">Prix Total</th>
                            </tr>
<?php
                            $nbArticles=count($_SESSION['panier']['libelleProduit']);
       
                            if ($nbArticles <= 0)
                                {
                                //echo "<tr><td>Votre panier est vide </ td></tr>";
                                } 
                                else
                                {
                                for ($i=0 ;$i < $nbArticles ; $i++)
                                    {
 ?>                                    
                                    <tr>

                                    <td><img width="180" src="images/<?=$_SESSION['panier']['refProduit'][$i]?>"></td>

                                    <td><?=$_SESSION['panier']['libelleProduit'][$i]?></td>


                                    <td><?=htmlspecialchars($_SESSION['panier']['refProduit'][$i])?></td>


                                    <td><input type="text" size="4" class="quantity" id="q" name="q" value="<?=htmlspecialchars($_SESSION['panier']['qteProduit'][$i])?>">

                                        <!--<input type="button" id="a" value="+" onClick="ajout()">
                                        <input type="button" id="e" value="-" onClick="enleve()"> </td>-->

                                        <input type="button" id="a" value="+" >
                                        <input type="button" id="e" value="-" >

                                         </td>


                             <td class="price"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]))?></td>

                             <td class="amount"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]) * ($_SESSION['panier']['qteProduit'][$i])) ?></td>

                             <td><a class="SuppressCartLink" href="index.php?p=carts.delete&id=<?=$_SESSION['panier']['libelleProduit'][$i] ;?>" ><img src="librairies/icones/delete.gif" width="25px"></a></td>

                        </tr>
<?php
                                    }
?>
                        
<?php          
                                }   
?>
                        </table>
                    </form>

Ma fonction

document.getElementById('a').onclick = function() {
document.getElementById('q').value =  parseInt(document.getElementById('q').value) +parseInt(1);
}

Et l'eau,

mdn a écrit :

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

C'est Normal que tu aies ce comportement.....
Modifié par niuxe (17 Apr 2020 - 11:47)

Merci pour la réponse.

Ce que tu veux dire c'est que effectivement id est unique dans mon formulaire mais comme j'ai plusieurs lignes et qu'il est unique je n'ai que la permière ligne

Il faudrait plutôt que j'utilise une classe à la place

Merci pour tes remarques j'ai pu avancer comme tu le vois avec le fichier ci-dessus même si je pense que cela peut être simplifié.

Par contre mon ajax ne fonctionne pas car quand je ressort pour aller sur ma page mettre une autre image en revenant le changement de quantité n'est pas pris en compte.

Dernière petite chose , je fais la même type d'action en enlevant une photo, comment faire pour ne pas répéter en changeant seulement le sens (-1 au lieu de +1)

Merci d'avance

<script type="text/javascript">

    $(document).ready(function () {

    $(".a").on("click", function(){

        //RECUPERE INDICE DU CHAMP AVEC CLASSE a
        var indice=$(this).index('.a');

        var form = document.getElementById('panier');

        var quantities = form.getElementsByClassName('q') ;
        var prices = form.getElementsByClassName('p') ;
        var amounts = form.getElementsByClassName('am') ;


        //DONNES CORRESPONNDANTES A LA LIGNE AFFECTTE
        var quantity = quantities[indice];
        var price = prices[indice];

        //INCREMENTATION DE LA QUANTITE
        quantity.value = parseFloat(quantity.value) + 1;

        //CALCUL DU TOTAL DE LA LIGNE
        var amount = quantity.value * parseFloat(price.innerHTML);
        //AFFICHAGE DU NOUVEAU MONTANT DANS LE FORMULAIRE
        amounts[indice].innerHTML = amount;

        //CALCUL DES QUANTITES TOTALES ET MONTANTS TOTAUX
        var number_items = 0;
        var number = 0;
        var total = 0;

        for(var i=0;i<quantities.length;i++)
            {
            number_items += parseFloat(quantities[i].value);

            total += parseFloat(prices[i].innerHTML) * parseFloat(quantities[i].value); 
            }

            //AFFICHAGE  DES QUANTITES TOTALES ET MONTANTS TOTAUX
            document.getElementById('nb_items').innerHTML = 'Nombre Items : ' + number_items;
            document.getElementById('total').innerHTML = 'Total : ' + format(total);

        $.ajax({
                    type : "POST",
                    url: $(this).attr("action" ),
                    dataType : 'html', // On désire recevoir du HTML
                    data: $(this).serialize(), //le formulaire est "sérializé"
                    success : function(code_html, statut) {
                        //$("#calendrier" ).html(code_html);
                    },
                    error: function() {
                        //$("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
                    }
                });
            return false;
        });
                    
    });

                $(".e").on("click", function(){

                var indice=$(this).index('.e');
  
                var form = document.getElementById('panier');

                var quantities = form.getElementsByClassName('q') ;

                var quantity = quantities[indice];

                quantity.value = parseFloat(quantity.value) - 1;
              
            });

Je vois pas mal d'erreurs :

- les "a", "e" ça veut rien dire. propose plutôt "ajouter", "enlever"
- Tu traites les nombres entiers. Or, tu utilises parseFloat. Il faudrait que tu utilises parseInt (je te conseille vivement de bien lire la documentation de parseInt)
- return false ne fonctionnera pas. regarde du côté de la méthode preventDefault()
- ton ajax ne risque pas de fonctionner :

$.ajax({
                    type : "POST",
                    url: $(this).attr("action" ),
                    dataType : 'html', // On désire recevoir du HTML
                    data: $(this).serialize(), //le formulaire est "sérializé"
                    success : function(code_html, statut) {
                        //$("#calendrier" ).html(code_html);
                    },
                    error: function() {
                        //$("#calendrier" ).html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>" );
                    }
                });

Dans le paramètre url et data, tu déclares $(this). Il y a de fortes chances que $(this) fasse références à $.ajax. Je te suggère de consulter la documentation de la méthode $.ajax et plus précisément cette section là : example

Peux tu stp mettre sur le forum :
- le rendu html du tableau (l'entête et une ligne de données)
- le code php de la cible de ton formulaire (<form action="mon-controller.php">)

dudu22 a écrit :
Dernière petite chose , je fais la même type d'action en enlevant une photo, comment faire pour ne pas répéter en changeant seulement le sens (-1 au lieu de +1)

Heu oui..... je reconnais la langue employée puisque c'est du français. Essaie avec le langage des signes.
Modifié par niuxe (18 Apr 2020 - 14:10)

Merci beaucoup pour ton aide.

- les "a", "e" ça veut rien dire. propose plutôt "ajouter", "enlever"
C'est ce que j'ai fait au début puis je me suis aligné sur le reste des input que je dois revoir

Tu traites les nombres entiers. Or, tu utilises parseFloat. Il faudrait que tu utilises parseInt (je te conseille vivement de bien lire la documentation de parseInt)

C'était au cas où j'avais du flottant mais je vais mettre parseInt

Oui je vais utiliser preventDefault

Le problème avec mon ajax c'est qu'il ne sert à rien à priori car je ne déclenche pas le formulaire donc je me retrouve à la situation initiale !!!

Il faudrait que je relance mon formulaire avec les nouvelles données

Mon code formulaire

<form class="uk-form" method="post" action="index.php?p=carts.show" id="panier" name="panier">
                        <table class="uk-table">
                            <tr>
                                <th class="uk-text-center">Vignette</th>
                                <th class="uk-text-center">Index Photo</th>
                                <th class="uk-text-center">Référence Photo</th>
                                <th class="uk-text-center">Quantité </th>
                                <th class="uk-text-center">Prix Unitaire </th>
                                <th class="uk-text-center">Prix Total</th>
                            </tr>
<?php
                            $nbArticles=count($_SESSION['panier']['libelleProduit']);
       
                            if ($nbArticles <= 0)
                                {
                                //echo "<tr><td>Votre panier est vide </ td></tr>";
                                } 
                                else
                                {
                                for ($i=0 ;$i < $nbArticles ; $i++)
                                    {
 ?>                                    
                                    <tr>

                                    <td><img width="180" src="images/<?=$_SESSION['panier']['refProduit'][$i]?>"></td>

                                    <td><?=$_SESSION['panier']['libelleProduit'][$i]?></td>


                                    <td><?=htmlspecialchars($_SESSION['panier']['refProduit'][$i])?></td>


                                    <td><input type="text" size="4" class="q" id="q" name="q" value="<?=htmlspecialchars($_SESSION['panier']['qteProduit'][$i])?>">

                                        <input type="button" id="a" class="a" value="+" >
                                        <input type="button" id="e" class="e" value="-" >

                                         </td>


                             <td class="p"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]))?></td>

                             <td class="am"><?=format_figures(($_SESSION['panier']['prixProduit'][$i]) * ($_SESSION['panier']['qteProduit'][$i])) ?></td>

                             <td><a class="SuppressCartLink" href="index.php?p=carts.delete&id=<?=$_SESSION['panier']['libelleProduit'][$i] ;?>" ><img src="librairies/icones/delete.gif" width="25px"></a></td>

                        </tr>
<?php
                                    }
?>
                        
<?php          
                                }   
?>
                        </table>
                    </form>

Modifié par dudu22 (18 Apr 2020 - 20:08)

J'ai réfléchi à mon problème et annuler l'ajax d'envoi du formulaire

J'ai créé un bouton refresh (caché par la suite)

En mouvementant les boutons je déclenche l'action de rafraichir la page

$('#refresh').click();

Mais cela me relance la page à chaque fois ce que je voulais éviter

Je cherche une fonction qui déclenche ce refresh quand je quitte la page

J'ai essayé cela mais sans succès :

window.onbeforeunload = function () {
                   
                    
                        $('#refresh').click();
                   
                };

Merci c'est très sympa je vais regarder cela

Oui j'ai vu le input number mais j'étais parti d'un exemple avec un incrémenteur
Mais je pense qu'ensuite la résolution du problème est le même