Plusieurs checkbox = un seul id(si different)

**ishaq74** · 30/05/2019, 19h18

Bonjour,

Dans le cadre d'un projet e-commerce,
J'ai plusieurs checkbox (ce sont des articles stockés dans mysql).
J'ai un bouton ajouter par article, qui récupère l'id, le nom, le prix, et quantite=1.

Jusqu'ici tout est OK

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
17
18
19
20
21
22
23
24
25
 <?php
include('database_connection.php');
 
$query =  "SELECT * FROM tbl_product WHERE category = 'PAINS' ORDER BY id DESC";
 
$statement = $connect->prepare($query);
 
if($statement->execute())
{
	$result = $statement->fetchAll();
	$output = '';
	foreach($result as $row)
	{
		$output .= ' 
		<label class="checkbox">
			  <input type="hidden" name="quantity" id="quantity' . $row["id"] .'" value="1" />
              <input type="checkbox" name="name" id="name'.$row["id"].'" value="'.$row["name"].'"/>
              <span>'.$row["name"].'</span>
			  <input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
            </label><input type="button" name="add_to_cart" id="'.$row["id"].'" class="button add_to_cart" value="Ajouter" /><div class="tooltip"  style="display:none;">Article ajoute</div>
		';
	}
	echo $output;
}
?>

Maintenant, vu que j'ai plusieurs checkbox, je souhaite les combiner pour n'obtenir qu'un seul nom et prix.
Pour ma part, j'ai décidé de les stocker dans un textarea (ca fonctionne) et de récupérer sa value en tant que nouveau nom de l'article.
Pour le prix j'y suis pas encore mais j'ai l'intention de faire un autre textarea sur le meme schema (ou alors explode) (me reste a additionner les valeurs qui seront dedans, je pense m'en sortir mais je n'ai pas encore planché la dessus).

C'est là que ça bloque, et je ne vois meme pas comment m'en sortir, je dois meme carrément me tromper le méthode dès le départ

Ce serait sympa si vous pouviez jeter un oeil et me dire ce que vous en pensez,
Merci d'avance

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//action.php
 
session_start();
 
if(isset($_POST["action"]))
{
	if($_POST["action"] == "add")
	{
		if(isset($_SESSION["shopping_cart"]))
		{
			$is_available = 0;
			foreach($_SESSION["shopping_cart"] as $keys => $values)
			{
				if($_SESSION["shopping_cart"][$keys]['product_id'] == $_POST["product_id"])
				{
					$is_available++;
					$_SESSION["shopping_cart"][$keys]['product_quantity'] = $_SESSION["shopping_cart"][$keys]['product_quantity'] + $_POST["product_quantity"];
				}
			}
			if($is_available == 0)
			{
				$item_array = array(
					'product_id'               =>     $_POST["product_id"],  
					'product_name'             =>     $_POST["product_name"],  
					'product_price'            =>     $_POST["product_price"],  
					'product_quantity'         =>     $_POST["product_quantity"]
				);
				$_SESSION["shopping_cart"][] = $item_array;
			}
		}
		else
		{
			$item_array = array(
				'product_id'               =>     $_POST["product_id"],  
				'product_name'             =>     $_POST["product_name"],  
				'product_price'            =>     $_POST["product_price"],  
				'product_quantity'         =>     $_POST["product_quantity"]
			);
			$_SESSION["shopping_cart"][] = $item_array;
		}
	}

Code JAVASCRIPT :

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
17
18
19
20
21
22
23
24
// AJOUTER
	$(document).on('click', '.add_to_cart', function(){
		var product_id = $(this).attr("id");
		var product_name = $('#name'+product_id+'').val();
		var product_price = $('#price'+product_id+'').val();
		var product_quantity = 1;
		var action = "add";
		if(product_quantity > 0)
		{
			$.ajax({
				url:"action.php",
				method:"POST",
				data:{product_id:product_id, product_name:product_name, product_price:product_price, product_quantity:product_quantity, action:action},
				success:function(data)
				{
					load_cart_data();
				}
			});
		}
		else
		{
			alert("Please Enter Number of Quantity");
		}
	});

Code HTML :

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

1
2
3
4
 
<input type="checkbox" name="name" id="name'.$row["id"].'" value="'.$row["name"].'"/>
<textarea id="name" name="name" value="" class="get_checked"></textarea>
<input type="button" name="add_to_cart" id="ici je sais pas quoi mettre du coup? PARCE QUE IL FAUT NOUVEL ID A CHAQUE AJOUT SI NOM DIFFERENT" class="button add_to_cart" value="Ajouter" />

J'ai essayé dans tout les sens, mais j'obtiens pas ce que je veux (que le premier nom, et puis vu que l'id est le meme, les ajouts s'écrasent...)

http://beepbeep74.free.fr/chop/index2.php

**Watilin** · 31/05/2019, 12h45

Bonjour,
ta question n’est pas très claire, mais en regardant ton site je pense que j’ai compris à peu près. Je récapitule :

Tu as un choix « pain » et un choix « viande », et dans chaque groupe il ne peut y avoir qu’un seul élément choisi. Sur ton site je vois que tu utilises des <input type="radio">, ils sont effectivement plus adaptés que "checkbox", encore faut-il leur donner les bons name. Par exemple, tu pourrais donner name="choix-pain" pour les inputs du groupe « pain », et name="choix-viande" pour ceux du groupe « viande ».

Tu récupères les noms des choix et tu les concatènes (au moyen d’une <textarea>) pour obtenir un nom de commande, par exemple SANDWICH,BACON.

À partir de là, tu as deux possibilités : soit tu découpes la valeur de ta <textarea> sur la virgule, $(this).val().split(","), soit tu utilises le nom de commande entier (avec la virgule) comme identifiant dans ta base de données. Mais il faudra alors t’arranger pour que les ingrédients soient toujours listés dans le même ordre, sinon tu auras des redondances, par exemple : BACON,SANDWICH et SANDWICH,BACON seront la même commande.

Quelques remarques :

sur les boutons radio, l’attribut name sert à désigner les groupes de choix exclusif. Sur les autres inputs, en l’absence d’un <form>, les name ne servent à rien.
Actuellement, tu stockes des informations dans des <input type="hidden"> et je pense que ça te complique la vie. Je pense que tu pourrais utiliser des attributs data à la place.
Pense à regarder régulièrement ton code HTML généré (Ctrl+U) pour t’assurer que le PHP produit bien ce que tu attends.

**ishaq74** · 31/05/2019, 19h50

Bonjour,
Les choix sont toujouts listés dans le meme ordre.

**ishaq74** · 21/06/2019, 07h32

Bonjour,

Je reviens avec du neuf, finalement j'ai pas fais par id mais par nom pour régler mon problème. Donc dans l'idée c'est ok. Maintenant je souhaiter attacher un prix au nom.

J'ai dans ma tète deux pistes de solutions que je n'arrive pas a exploiter :

1- j'ai un textarea, qui prend comme value des checkbox cliqué, de type (salade tomates oignons), j'aimerais y ajouter un prix du style (salade:1,tomate:1,oignons:0.50) et j'pensais faire un split qui récupere les noms et les stocke dans un textarea comme tout a l'heure (salade tomates oignons), et dans un autre textarea y faire une fonction qui additionnera les prix et donnera une seule value au fur et a mesure (var=1+1+0.50) var=2.

Code HTML :

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

<textarea id="newname" name="newname" value="'.$row["name"].'" class="get_checked" style="display:none";></textarea>

j'vois pas comment imbriquer deux split a la suite en fait, et récuperer (salade tomate oignons) d'un coté et (1+1+0.50 soit 2) d'autre part

2- L'idéal serait de passer par les checbox directement,

Code HTML :

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

1
2
3
4
5
<label class="checkbox">
              <input type="radio" name="name" id="radio_name" value="'.$row["uppername"].'" class="uncheck"/>
              <span>'.$row["uppername"].'</span>
			  <input type="hidden" name="hidden_price" id="price1" value="'.$row["price"].'" />
            </label>

Et jouer avec le input hidden price pour chaque checkbox, pour que chacun est son prix attaché. et donc la textarea ne garde que (salade tomate oignons) mais elle sait que salade vaut 1 tomate 1 et oignons vaut 0.50, et je récupere en temps réel dans un autre textarea l'addition.

EDIT : j'ai vu l'idée du dataSet attribut mais j'arrive pas

Besoin de vous, s'il vous plait

**Toufik83** · 21/06/2019, 17h07

Envoyé par ishaq74

j'aimerais y ajouter un prix du style (salade:1,tomate:1,oignons:0.50)

Pourquoi ne pas stocker les valeurs dans un tableau javascript portant des objets au lieu d'utiliser un textarea ?

Genre

Code :

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

[{"nom":"salade","prix":"1"},{"nom":"tomate","prix":"1"},{"nom":"oignons":"prix":"0.50"}]

Et puis fais attention à la value générée du <textarea> :

Code html :

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

<textarea id="newname" name="newname" value="'.$row[" newname"].'"="" class="get_checked" style="display:none" ;=""></textarea>

Et aussi les id ("radio_name" et "price1") ne sont pas uniques (le lien que tu as posté)

Code html :

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
17
18
19
20
 
<p> 
    <label class="checkbox">
              <input type="radio" name="name" id="radio_name" value="SANDWICH" class="uncheck">
              <span>SANDWICH</span>
			  <input type="hidden" name="hidden_price" id="price1" value="2.00">
     </label>
 
      <label class="checkbox">
              <input type="radio" name="name" id="radio_name" value="BURGER" class="uncheck">
              <span>BURGER</span>
			  <input type="hidden" name="hidden_price" id="price1" value="2.00">
      </label>
 
      <label class="checkbox">
              <input type="radio" name="name" id="radio_name" value="GALETTE" class="uncheck">
              <span>GALETTE</span>
			  <input type="hidden" name="hidden_price" id="price1" value="2.00">
       </label>
</p>

Je te recommande d'inspecter ta page html (clic droit=>Inspecter) et regarde l'onglet "Elements" dans l'outil de développement pour voir les attributs des éléments html.

**ishaq74** · 21/06/2019, 21h43

Merci pour ta reponse,

Je comprends l'idee du tableau mais j´arriverais pas à le generer en php et recup la somme de l'addition des prix.

Pour les attribut des radio, les id dont les memes parce que je nˋai pas mis les values php en attendant de finir le code completement.

Pourrais-tu m´aider s'il te plait pour le tableau?

Invité · 22/06/2019, 12h42

Bonjour,

Eh ben.... Bonjour l'usine à gaz !

Envoyé par ishaq74

...j'ai vu l'idée du dataSet attribut mais j'arrive pas

...

1- A LIRE : attribut data-*

2- On va reprendre depuis le début : construction des checkbox / radio des PRODUITS (PAINS - VIANDES - ...).

Pas besoin d'input hidden : on utilise les data-* :

Code php :

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

1
2
3
4
5
6
<?php echo '
   <label class="checkbox">
      <input type="radio" value="'.$row["id"].'" data-nom="'.$row["name"].'" data-prix="'.$row["prix"].'" data-qty="1" class="prd uncheck"/>
      <span>'.$row["name"].'</span>
   </label>
';

En jQuery, on récupère les données avec :

Code :

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

1
2
3
4
5
6
7
$(document).on('click', '.prd', function(){
   var prd_id = $(this).val();
   var prd_name = $(this).data('nom');
   var prd_price = $(this).data('prix');
   var prd_quantity = $(this).data('qty');
//...
// (on traite selon :checked)

(comme tu ne montres pas le code de construction des checkbox / radio..., on ne connait pas le nom des colonnes en BDD)

3- Concernant le "nom" à donner... il faudrait éviter de confondre :

"produit" (1 produit = 1 ingrédient)
et "recette" (1 recette = plusieurs ingrédients).

ex. :

"BURGER", "BACON", "BARBECUE" = 3 produits
"BURGER BACON BARBECUE" = 1 recette

DONC : change les noms de tes variables, pour qu'il n'y ait pas de confusion possible.

4-CELA DIT, il ne faut pas oublier que CHAQUE PRODUIT en bdd possède un index UNIQUE (id, auto-incrémenté) !
En dehors de la quantité (fixée à 1), toutes les autres données peuvent être récupérées dans la base de données.

Ces id (des produits) sont donc les SEULES DONNEES nécessaire et suffisant à transmettre pour :

construire le nom de la "recette"
calculer le prix (total) de la "recette"

**ishaq74** · 24/06/2019, 10h08

Bonjour tout le monde,

Finalement j'ai trouvé solution à mon problème grâce à Toufik83 en MP.

le prix est dans le checkbox avec l'attribut data-price:

et l'addition se fait grace au code suivant :

Code :

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

1
2
3
4
5
6
$(document).on('click', '.add_to_cart', function(){
	let somme=0;
	$(':input[data-price]:checked')
       .each(function(){
		somme+=parseFloat($(this).attr('data-price'));
	});

et du coup var product_price = somme;.

Merci à lui et aux autres pour s'etre penché sur mon probleme.

Par contre j'aurais aimé faire comme l'a dit jreaux par ID mais j'ai pas réussi à créer des id différents selon les particularités (ex : Menu chicken bacon et Menu chicken bacon sans oignons ont la meme id mais pas le meme nom, donc pour update la quantité ou supprimer la ligne dans mon panier, j'ai fais par nom faute de moyens et d'éclaircissement sur ce sujet).

Je marque ce sujet en résolu !

Plusieurs checkbox = un seul id(si different)

jQuery

Vue hybride

Discussions similaires

Partager

Partager