j'aimerais savoir s'il était possible que lorsque je diminue la quantité d'articles dans une liste d'achats, le prix diminue en fonction du nombre d'article retirés?
Par exemple si je passe la quantité de la ligne 2 du tableau à 1, le prix passe à 5€ parallèlement, sans que la page ait besoin d'être rafraîchie.
Bonjour est-ce que tu peut nous montré le code HTML ?
Javascript va avoir besoin de référencé des éléments du documents pour les mettre à jour notamment les prix à mettre à jour et les input de type number pour écouté leur changement de valeur, voici un code illustratif qu'il faudra adapté en fonction de ton documents et des prix réel de tes éléments:
<div>
<div>
<input type="number" class="quantity-1" name="quantity-1" value="0">
<!-- valeur par défaut ici: "0" -->
<div>
<span class="price-1">0</span>€
</div>
</div>
</div>
<script>
// prix du premier item
const PRICE_ITEM_1 = 10;
// séléctionne le input de type number
const inputPrice1 = document.querySelector('.quantity-1');
// séléctionne le text qui contient le prix pour le mettre à jour dynamiquement
const priceText1 = document.querySelector('.price-1');
// écoute les changement sur le input de type number
inputPrice1.addEventListener('change', function(event) {
// lit la valeur actuel dans le input et la parse en nombre entier
const value = parseInt(event.target.value);
// calcul le nouveau prix en multipliant la quantité actuel par le prix d'un item
const newPrice = value * PRICE_ITEM_1;
// met à jour le document
priceText1.textContent = (newPrice).toString();
});
</script>
Si tu as comme dans la capture d'écran plusieurs items à géré pour évité d'avoir un code javascript assez re bondant qui ressemblerait à ça:
Le code répété et surtout la fonction qui répond à l'événement "change" des input, les seuls valeur qui varient et le texte à mettre à jour et le prix d'un item, tu peut écrire une fonction qui prend en paramètre ses variations (le texte à mettre à jour et le prix d'un item)
et retourne une fonction qui répond à l'événement "change" pour un item spécifique, évitant ainsi de la ré écrire pour chaque un d'entre eux:
<script>
const PRICE_ITEM_1 = 10;
const PRICE_ITEM_2 = 20;
const inputPrice1 = document.querySelector('.quantity-1');
const inputPrice2 = document.querySelector('.quantity-2');
const priceText1 = document.querySelector('.price-1');
const priceText2 = document.querySelector('.price-2');
// fonction qui génére un fonction pour un item spécifique
// elle évité de ré écrire la fonction qui répond à l'événement: "change"
// pour chaque item:
function createOnChange(priceText, priceItem) {
// créé la fonction qui répond à l'événement
// "change" de l'input et la retourne
return function(event) {
const value = parseInt(event.target.value);
const newPrice = value * priceItem;
priceText.textContent = (newPrice).toString();
};
};
inputPrice1.addEventListener(
'change',
createOnChange(priceText1, PRICE_ITEM_1)
);
inputPrice2.addEventListener(
'change',
createOnChange(priceText2, PRICE_ITEM_2)
);
</script>
merci pour votre réponse et pardonnez ma réponse tardive, j'ai attaqué d'autres partie de mon site entre temps.
Je vous mets mon code de ma page "panier.php".
<?php
include 'tete.php';
?>
<a href="index.php">Accueil</a> >
<a href="panier.php">Panier</a><br/><br/>
<?php
$quantite = 0;
$prix_final = 0;
if (isset($id)) //$id est le nom de la session ou du cookie. Le test pour ffecter à $id une valeur est dans 'tete.php'.
{
if (isset($_GET['delete']))
{
$article_panier = $bdd->prepare('SELECT * FROM panier WHERE id_article = :id');
$article_panier->execute(array('id' => $_GET['delete']));
$nb_art_panier = $article_panier->fetch();
$article = $bdd->prepare('SELECT * FROM article WHERE id = :id');
$article->execute(array('id' => $_GET['delete']));
$nb_art = $article->fetch();
$delete = $bdd->prepare('DELETE FROM panier WHERE id_article = :id');
$delete->execute(array('id' => $_GET['delete']));
$stock = $bdd->prepare('UPDATE article SET quantite = ? WHERE id = ?');
$stock->execute(array($nb_art_panier['quantite'] + $nb_art['quantite'],$_GET['delete']));
header("Refresh:0 url=panier.php");
}
if (isset($_GET['delete_all']))
{
if ($id == $_GET['delete_all'])
{
$article_panier = $bdd->prepare('SELECT * FROM panier WHERE id_membre = :id');
$article_panier->execute(array('id' => $_GET['delete_all']));
while ($donnees = $article_panier->fetch())
{
$article = $bdd->prepare('SELECT * FROM article WHERE id = :id');
$article->execute(array('id' => $donnees['id_article']));
$nb_art = $article->fetch();
$stock = $bdd->prepare('UPDATE article SET quantite = ? WHERE id = ?');
$stock->execute(array($donnees['quantite'] + $nb_art['quantite'],$donnees['id_article']));
$delete = $bdd->prepare('DELETE FROM panier WHERE id_article = :id');
$delete->execute(array('id' => $donnees['id_article']));
header("Refresh:0");
}
}
}
?>
<table>
<caption>Votre Panier</caption>
<tr>
<td class="centre" colspan=2>Article</td>
<td class="centre">Prix de l'article</td>
<td class="centre">Quantité</td>
<td class="centre">Prix total</td>
<td class="centre">Supprimer l'article</td>
</tr>
<?php
$req = $bdd->prepare('SELECT * FROM panier WHERE id_membre = :id');
$req->execute(array('id' => $id));
while ($donnees = $req->fetch())
{
$article = $bdd->prepare('SELECT * FROM article WHERE id = :id');
$article->execute(array('id' => $donnees['id_article']));
$resultat = $article->fetch();
$quantite = $quantite + $donnees['quantite'];
$prix_final = $prix_final + $resultat['prix'] * $donnees['quantite'];
?>
<tr>
<td class="centre"><img src="boutique/miniature/<?php print $resultat['id']; ?>.jpg"></td>
<td class="centre"><?php print $resultat['nom']; ?></td>
<td class="centre"><?php print $resultat['prix']; ?>€</td>
<td class="centre">
<form mecaptionod="post" action="panier.php">
<input type="number" name="nb" step="1" min="1" max="<?php print $resultat['quantite'] + $donnees['quantite']; ?>" value="<?php print $donnees['quantite']; ?>"/>
</form>
</td>
<td class="centre"><?php print $resultat['prix'] * $donnees['quantite']; ?>€</td>
<td class="centre"><a href="panier.php?delete=<?php print $resultat['id']; ?>"><img src="boutique/miniature/mini_poubelle.png"/></a></td>
</tr>
<?php
}
?>
<tr>
<td class="centre pastd" colspan=2><h3 class="pasretour">Nombre d'article(s) en tout:</h3> <?php print $quantite; ?></td>
<td class="centre pastd" colspan=4><h5 class="pasretour">Prix Final :</h5> <?php print $prix_final; ?>€</td>
</tr>
<tr>
<td class="centre pastd" colspan=2><a href="panier.php?delete_all=<?php print $id; ?>"><img src="images/vide.png"/></a></td>
<td class="centre pastd" colspan=4>
<form mecaptionod="post" action="panier.php">
<input type="hidden" name="achat" value="<?php print $id; ?>" />
<button><img src="images/commande.png"/></button>
</form>
</td>
</tr>
</table>
<?php
}
else
{
print "Vous n'avez rien à faire là!";
}
?>
</body>
</html>
Thomas
Bouton qui modifie des données en direct
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Thomas
Thomas
suggestion de présentation.
Thomas