Remplir un panier en js sans bouton submit

Version imprimable

Bonjour à tous et à toutes,
Je cherche à faire un panier en js pour éviter les boutons submit comme sur ce site https://www.cartouche-vide.fr/2-tari...es_encre_vides

J'ai la liste de mes produits en php j'ai le petit code js qui me permet de calculer et afficher le prix de rachat mais pour l'instant pour une seul référence car je ne vois pas comment récupérer les informations (id, prix) pour définir les id des input et le prix d'achat pour le calcul en js.

Voici mon code actuel

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
<?php
$nbr_prod = $bdd->query('SELECT * FROM '.TABLE[8].' ORDER BY marque ASC');
while($resultats = $nbr_prod->fetch()) //boucle affichant les résultats
        {
                $liste_produits[$resultats['marque']][] = $resultats;
        }
$nbr_prod->closeCursor();
echo'<div id="contenu">';
foreach ($liste_produits as $key => $resultat_values)
        {
                echo'<div class="bandeau_marque">
                        <div class="text_marque">'.stripslashes(trim($key)).'</div>
                        <div class="bt_marque" id="bouton_detail'.stripslashes(trim($key)).'" onclick="afficher_detail(\'detail'.stripslashes(trim($key)).'\')"><img src="'.VARIABLE[0].'/images/haut.png" alt="Afficher la liste des cartouches rachetées" loading="lazy"/></div>
                </div>';
                echo'<div id="detail'.$key.'">';
                echo'<div class="ligne_gr_ecran"><div class="col_num_article">Référence</div><div class="col_desc">Description</div><div class="col_tarif">Prix</div><div class="col_qte">Qte</div></div>';
                foreach($resultat_values as $cle => $values)
                        {       
                                echo'<div class="ligne_article"><div class="col_num_article"><strong class="txt_pt_ecran">Référence :&nbsp;</strong>'.stripslashes(trim($values['num_article'])).'</div>
                                <div class="col_desc"><strong class="txt_pt_ecran">Description :&nbsp;</strong>'.nl2br(stripslashes(trim($values['description_article']))).'</div>
                                <div class="col_tarif"><strong class="txt_pt_ecran">Prix :&nbsp;</strong>'.trim(number_format($values['tarif_rachat'],2,'.',' ')).' €</div>';
                                echo'<div class="col_qte">';
                                        echo'<form method="POST" action="'.VARIABLE[0].'/ajout-produit.html" class="form_listing">';
                                                echo'<input placeholder="Qte" type="text" name="qte"/>';
                                                echo'<input type="submit" value="Valider"/><input name="id" type="hidden" value="'.$values['id'].'">';
                                        echo'</form>';
                                echo'</div></div><hr class="sexy_line"/>';                              
                        }
                echo '</div>';
        }
echo'</div>';
echo'<pre>';
print_r ($liste_produits);
echo'</pre>';
 
?>

Voici mon tableau

Code:

Voici mon js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function Function_calcul() {
        var nbr_article = document.getElementById("input1").value;
        var prix_achat = Number(2);//à remplacer par le prix d'achat [tarif_rachat]
        var total = (Number(nbr_article) * Number(prix_achat));
        document.getElementById("total_article").innerHTML = total;
}
</script>
 
<ul>
    <li class="default" id="form_amount_li">Nbr article
		<input id="input1" maxlength="8" name="amount" type="text" value="" onkeyup="Function_calcul()"/>
	</li>
</ul>
<span id="total_article"></span> €

Il faudrait que je récupère [id] de chaque produit en js pour remplacer input1 de cette ligne (var nbr_article = document.getElementById("input1").value;) par le numéro unique du produit mais je ne vois pas comment faire.
Est ce que quelqu'un peut m'aider ?
Merci d'avance.
Voici l'url pour voir en ligne mon projet https://sergiocrea.fr/test.html

petite parenthèse en php : utilisez ->fetch(PDO::FETCH_ASSOC) comme cela vous n'aurez plus les éléments avec les index numériques qui ne vous serviront pas dans votre page.

ensuite quand vous avez une page qui mélange php et javascript, je vous conseille de d'abord faire un exemple fonctionnel en javascript et quand tout est bon, vous passez à la phase php en rendant l'exemple dynamique.

là par exemple, j'ai fait un code qui se limite à un produit. le prochaine étape est de le modifier pour rajouter un 2e produit (et peut-être un 3e pour être sûr que ça fonctionne) :
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 <div class="produit" data-prix-unitaire="10"> <span class="colonne prix"> Prix unitaire : 45,00 € </span> <span class="colonne nombre"> <input oninput="changer_prix(event)"/> </span> <span class="colonne total"> Total : <span class="somme_total"></span> </span> </div> <script> function changer_prix(e) { const champ_input = e["target"]; const ligne_produit = champ_input.closest(".produit"); // recherche parmi les balises parentes const nombre_produit = champ_input["value"]; const prix_unitaire = ligne_produit["dataset"]["prixUnitaire"]; const zone_total = ligne_produit.getElementsByClassName("somme_total")[0]; zone_total["textContent"] = nombre_produit * prix_unitaire + " €"; } </script>

merci pour le PDO::FETCH_ASSOC je savais bien qu'il y avait un truc pour enlever les clés numériques.
J'ai avancé un peut voici mon code

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
 
<?php
$nbr_prod = $bdd->query('SELECT * FROM '.TABLE[8].' ORDER BY marque ASC');
while($resultats = $nbr_prod->fetch(PDO::FETCH_ASSOC)) //boucle affichant les résultats
        {
                $marque_article[$resultats['id']] = $resultats;
        }
$nbr_prod->closeCursor();
$marque_article_json = json_encode($marque_article);
?>
<p id='p1'></p>
<script>
  var id_js = <?php print $marque_article_json;?> ;
function Function_calcul() {
      for(let propriete in id_js){
        var valu='input'+id_js[propriete]['id'];
	var nbr_article = document.getElementById(valu).value;
	var prix_achat = id_js[propriete]['tarif_rachat'];
	}
 
	var total = (Number(nbr_article) * Number(prix_achat));
	document.getElementById("total_article").innerHTML = total;
}
</script>
<ul>
    <li class="default" id="form_amount_li">Nbr article
		<input id="input53" maxlength="8" name="amount" type="text" value="" onkeyup="Function_calcul()"/>
		<input id="input54" maxlength="8" name="amount" type="text" value="" onkeyup="Function_calcul()"/>
	</li>
</ul>
<span id="total_article"></span> €

ça fonctionne presque si je met var nbr_article = document.getElementById(valu).value; hors de la boucle for mais seul la référence avec le dernier id donc 54 fonctionne.
C'est normale mais je me demande comment faire du coup.