Ajouter +1 à un <input> en cliquant sur un nom -> multi modules

**ddaweb** · 08/08/2016, 18h45

Bonjour à tous,

Je suis de retour parmi vous pour poser une question concernant mon nouveau projet de caisse enregistreuse liée à ma base de données.
Prévu pour écran tactile.

Le contexte :
1. J'ai une liste de produits (d'une catégorie : "Soft - Eaux" ou "Bières" ou ... 6 au total pour l'instant)
2. Pour chaque produit j'ai quelques informations, dont son nom, la quantité, le prix de vente, etc ...
3. Il y un champs <input> avec la quantité pour la commande
4. Cette quantité peut déjà être introduite via un clavier virtuel en JS un léger rien modifié (je crois que le code original est sur ce forum, mais comme il a été partagé sur plusieurs forum, je ne suis pas à 100% certain)

Mon souhait :
Pouvoir ajouter +1 à la quantité du produit en cliquant sur son nom, en plus du clavier JS.

Voici le JS du clavier virtuel :

Code :

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
	var activeinput
 
	function populateTd(){
	var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
	for (i=0;i<tdcollection.length;i++){
			tdcollection[i].indice=i
			tdcollection[i].onmouseover=function(){this.className='over'}
			tdcollection[i].onmouseout=function(){this.className='up'}
			tdcollection[i].className='up'
			tdcollection[i].onmousedown=function(){this.className='down'}
			tdcollection[i].onmouseup=function(){this.className='up'}
 
			tdcollection[i].onclick=function(){if (!!activeinput){ if(this.indice<11){activeinput.value+=this.innerHTML;}
																   if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1)}
																   if(this.indice==12){activeinput.value=""}
																   }
												}
 
			}
		}
 
	function highlightActive(obj){
		var inputcollection=document.getElementsByTagName('input')
		for(i=0;i<inputcollection.length;i++){
 
			inputcollection[i].style.backgroundColor=(inputcollection[i]==obj)?"lime":"white"
		}
	}

Voici le code de ma liste, prévu pour 2 pages différentes avec des fonctionnalités différentes, seul le " $mode=='Caisse' " doit faire +1 :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?php
$article_existe=0;
$session_array_cat=$_SESSION[$cat_save];
 
if ($mode=='Caisse') { $where_actif="&& prod_actif='oui'"; $form_action="index.php?Panier"; }
	else { $where_actif=''; $form_action="index.php?Gestion_article"; }
 
$reponse_article_bar = mysqli_query($conn_cecs, "SELECT data1_nom, data2_nom, prod_achat_htva, prod_actif, prod_nbr_piece, prod_quantite, prod_prix_mbr, id_produit, type_nom, tva.data_tva_taux AS tauxTvaVente, tva2.data_tva_taux AS tauxTvaAchat 
	FROM 07_stock_produit prod
		INNER JOIN 07_stock_type type ON prod.id_type_prod=type.id_type 
		INNER JOIN 07_stock_data1 data1 ON prod.id_data1_prod=data1.id_data1 
		INNER JOIN 07_stock_data2 data2 ON prod.id_data2_prod=data2.id_data2
		INNER JOIN 01_data_tva tva ON prod.id_tva_prod=tva.data_tva_id 
		INNER JOIN 01_data_tva tva2 ON prod.id_tva_achat_prod=tva2.data_tva_id 
	WHERE prod_bar_cat='$cat_article_db' $where_actif
	ORDER BY type_nom") or die(mysqli_error($conn_cecs)); 
while ($in=mysqli_fetch_array($reponse_article_bar)) {
	$id_article=$in['id_produit'];
	$nom_article=$in['type_nom'];
	$nom_article_data1=$in['data1_nom'];
	$nom_article_data2=$in['data2_nom'];
	$nbr_article_stock=$in['prod_quantite'];
	$nbr_article_stock_pieces=$in['prod_nbr_piece'];
	$prix_article_htva=$in['prod_prix_mbr'];
	$prix_article_tva=$in['tauxTvaVente'];
	$prix_achat_htva=$in['prod_achat_htva'];
	$prix_achat_tva=$in['tauxTvaAchat'];
	$actif_article=$in['prod_actif'];
 
	$nbr_article_existe ++;
	$nbr_article_stock_pieces_tot=$nbr_article_stock*$nbr_article_stock_pieces;
	$nom_article_complet=str_replace('_',' ',$nom_article.' - '.$nom_article_data1.' - '.$nom_article_data2);
	$nom_article=str_replace('_',' ',$nom_article);
	$prix_article=$prix_article_htva*(1+($prix_article_tva/100));
	$prix_article=sprintf("%.2f",$prix_article); 
 
	print "<div style=\"float: left; width: 150px;\">";
		print "<form name=\"$id_article\" id=\"$id_article\" method=\"post\" action=\"$form_action\" >";
			$z++;
 
			// --------------- Mise en forme des nom des POSTS
			$post_id_article=$nbr_article_existe.'-id_article';
			$post_nom_article=$nbr_article_existe.'-nom_article';
			$post_nom_article_complet=$nbr_article_existe.'-nom_article_complet';
			$post_nbr_article=$nbr_article_existe.'-nbr_article';
			$post_nbr_piece=$nbr_article_existe.'-nbr_piece';
			$post_nbr_pieces_stock=$nbr_article_existe.'-nbr_pieces_stock';
			$post_prix_article_htva=$nbr_article_existe.'-prix_article_htva';
			$post_prix_article_tva=$nbr_article_existe.'-prix_article_tva';
			$post_prix_achat_htva=$nbr_article_existe.'-prix_achat_htva';
			$post_prix_achat_tva=$nbr_article_existe.'-prix_achat_tva';
			$post_prix_article_tvac=$nbr_article_existe.'-prix_article_tvac';
			$post_actif_article=$nbr_article_existe.'-actif_article';
			//$post_type_produit=$nbr_article_existe.'-type_produit';
 
			// --------------- Envoi des données utiles
			print "<input type=\"hidden\" name=\"$post_id_article\" value=\"$id_article\" />";
			print "<input type=\"hidden\" name=\"$post_nom_article\" value=\"$nom_article\" />";
			print "<input type=\"hidden\" name=\"$post_nom_article_complet\" value=\"$nom_article_complet\" />";
			print "<input type=\"hidden\" name=\"$post_nbr_article\" value=\"$nbr_article_stock\" />";
			print "<input type=\"hidden\" name=\"$post_nbr_piece\" value=\"$nbr_article_stock_pieces\" />";
			print "<input type=\"hidden\" name=\"$post_nbr_pieces_stock\" value=\"$nbr_article_stock_pieces_tot\" />";
			print "<input type=\"hidden\" name=\"$post_prix_article_htva\" value=\"$prix_article_htva\" />";
			print "<input type=\"hidden\" name=\"$post_prix_article_tva\" value=\"$prix_article_tva\" />";
			print "<input type=\"hidden\" name=\"$post_prix_article_tvac\" value=\"$prix_article\" />";
			print "<input type=\"hidden\" name=\"$post_prix_achat_htva\" value=\"$prix_achat_htva\" />";
			print "<input type=\"hidden\" name=\"$post_prix_achat_tva\" value=\"$prix_achat_tva\" />";
			print "<input type=\"hidden\" name=\"$post_actif_article\" value=\"$actif_article\" />";
			//print "<input type=\"hidden\" name=\"$post_type_produit\" value=\"$type_produit\" />";
			print "<input type=\"hidden\" name=\"cat_article\" value=\"$cat_article\" />";
			print "<input type=\"hidden\" name=\"envoi_produit\" value=\"oui\" />";
 
			// --------------- Recherche nbr produit déjà envoyé
			if (isset($session_array_cat)) {
				foreach ( $session_array_cat AS $commande1) {
					$id_article_foreach=$commande1[id_article];
					$nbr_article_foreach=$commande1[nbr_article];
 
					if ($id_article==$id_article_foreach) { $nbr_article=$nbr_article_foreach; break; }
						else { $id_article_foreach=''; $nbr_article=''; }
				}
			}
 
			// --------------- Mise en forme des textes
			if ($nbr_article_stock<=0) { $class_nom_article='module_nom_article_rouge'; }
			else { $class_nom_article='module_nom_article'; }
 
			if ($prix_article<=0) { $class_module_prix='module_prix_rouge'; }
			else { $class_module_prix='module_prix'; }
 
			if ($actif_article=='oui') { $class_module_nombre='module_nbr_gestion_stock'; }
			else { $class_module_nombre='module_nbr_gestion_stock_rouge'; }
 
			// --------------- Affichage
			if ($mode=='Gestion_stock' && $id_article==$id_article_modif) { print "<div class=\"module_article\" align=\"center\">"; }
			else { print "<div class=\"module_article\" style=\"background-color: $couleur_bar_type_module; \" align=\"center\">"; }
				print "<div>";
					if ($mode=='Caisse') { print "<input class=\"module_nbr_article\" name=\"$post_nbr_article\" value=\"$nbr_article\" size=\"3\" onfocus=\"activeinput=this\" />"; }
						else { print "<div class=\"$class_module_nombre\" align=\"center\"><b>$nbr_article_stock_pieces_tot</b></div>"; }
					print "<div class=\"$class_module_prix\" align=\"center\"><b>$prix_article €</b></div>";
					print "<div class=\"div_clear_3\">&nbsp;</div>";
					if ($mode=='Caisse') { print "<div class=\"$class_nom_article\" align=\"center\"> <b>$nom_article</b></div>"; } // ----- endroit à cliquer pour faire +1 à la quantité ci-dessus
						else { 
							print "<input type=\"hidden\" name=\"envoi_gestion_stock\" value=\"$nbr_article_existe\" />";
							print "<div class=\"$class_nom_article\" align=\"center\"><b>$nom_article</b><input type=\"submit\" class=\"submit_gestion_article\" value=\"Modifier\" /></div>";
							print "</form>";
						}
				print "</div>";
 
			print "</div>";
 
	print "</div>";
	unset ($id_article_foreach, $nbr_article, $nbr_article_foreach);
	print "<div class=\"col_article_space\">&nbsp;</div>";
	if ($z==5) { print "<div class=\"div_clear_10\">&nbsp;</div>"; $z=0; }
}
if ($mode=='Caisse') {		
		print "<input type=\"hidden\" name=\"article_existe\" value=\"$nbr_article_existe\" />"; // ----- envoyer le nombre d'articles
 
		//if ($nbr_article_existe>=1 && $cours_jour_id!='non' && $mode=='Caisse') { print "<input type=\"submit\" class=\"submit_commande\" value=\"&nbsp;\" />"; } // ------ A activer lors de la mise en production
		if ($nbr_article_existe>=1) { print "<input type=\"submit\" class=\"submit_commande\" value=\"&nbsp;\" />"; }
 
	print "</form>";
}
if ($nbr_article_existe==0) { print "<div class=\"module_pas_article\" style=\"background-color: $couleur_bar_type_module; \" align=\"center\"><br />&nbsp;<br />Il n'y a aucun article pour cette catégorie</div>"; }
?>

Si c'est possible, je suis ouvert à toutes les propositions.
J'ai trouvé un code qui fait +1 ou -1, mais en cliquant sur n'importe quel article, c'est toujours le 1er auquel c'est appliqué !

D'avance merci,
DDAWeb

Edit : Le clavier virtuel : http://www.developpez.net/forums/d27...rique-virtuel/

**ddaweb** · 08/08/2016, 19h02

Afin de pouvoir visualiser, voici l'état actuel de la mise en page :

Nom : Caisse_enregistreuse_apercu.PNG
Affichages : 437
Taille : 82,1 Ko

Le champs blanc à chaque produit est la quantité qu'il faudrait incrémenter.

**NoSmoking** · 08/08/2016, 19h32

Bonjour,
gère un élément actif, lors du clic sur cet élément par exemple, pour que tu puisses incémenter/décrémenter celui ci.

**ddaweb** · 08/08/2016, 19h43

Oui c'est pour cela que j'ai déjà prévu un ID au form

Code :

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

print "<form name=\"$id_article\" id=\"$id_article\" method=\"post\" action=\"$form_action\" >";

Je suis archi nul en JS, j'avais trouvé un code, mais ne fonctionnait que pour le 1er article, tous les autres articles implémentaient le 1er : je suis donc passé au clavier virtuel, mais pas pratique à l'utilisation pour ce cas-ci.
Cet ID correspond à l'ID de l'article dans la DB et je ne sais pas le nombre d'articles qu'il y aura, sans compter que les articles peuvent être activés et désactivés au besoin.

Je vais rechercher le code que j'avais testé, mais j'ai compris que cela venait de l'ID de référence du JS.

**ddaweb** · 08/08/2016, 20h46

J'ai trouvé quelque chose qui fonctionne, avec le défaut qu'il implémente le champs à la sélection pour travailler avec le clavier.
En attendant de trouver mieux, c'est une solution déjà acceptable, même si je préfèrerais cliquer sur la <div> du nom pour le faire car on masque le nombre avec le doigt en tactile.

Code de la ligne 98 :

Code :

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

if ($mode=='Caisse') { print "<input class=\"module_nbr_article\" name=\"$post_nbr_article\" value=\"$nbr_article\" size=\"3\" onfocus=\"activeinput=this\" onclick=\"value ++\" />"; }

**NoSmoking** · 09/08/2016, 10h50

Un petit exemple simple

HTML sommaire

Code html :

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

1
2
3
4
5
<form>
  <input>
  <input>
</form>
<button>Inc.</button>

JS tout autant sommaire

Code :

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
var oActif = null;
var oForm = document.querySelector( 'form');
oForm.onclick = function(e){
    oActif = null;
    oElem = e.target;
 
    if( oElem.tagName === 'INPUT'){
      oActif = oElem;
    }
}
var oBtn = document.querySelector( 'button');
oBtn.onclick = function(e){
   if( oActif){
     var val = oActif.value || 0;
     oActif.value = parseInt( val) +1;
   }
}

**ddaweb** · 10/08/2016, 20h01

En regardant pour adapter ton code je viens de me rendre compte que j'ai une grosse erreur de code que je dois absolument regarder à rectifier : en mode caisse j'ouvre un <form> à chaque article et ne le referme qu'après la lecture de tous les articles.

Cela ne dois être qu'un seul formulaire, tandis que pour le 2me mode, chaque article est un formulaire ce qui est bien le cas.

Je reviens quand c'est rectifié et fonctionnel.

Invité · 10/08/2016, 20h48

Look très sympa (et inspirant), par contre pourquoi pas utiliser Jquery ou mieux, un framework comme AngularJs 1.5 ou vue.js ? C'est plus simple, non ? Avec le 2 way binding surtout ...

**ddaweb** · 10/08/2016, 21h34

Envoyé par devwebsympa

Look très sympa (et inspirant), par contre pourquoi pas utiliser Jquery ou mieux, un framework comme AngularJs 1.5 ou vue.js ? C'est plus simple, non ? Avec le 2 way binding surtout ...

Merci pour votre compliment.

Je programme en amateur, j'aide le club comme je peux (c'est une passion et non un but lucratif) et je commence à me débrouiller un tout petit peu en php et mysql, les autres langages me sont inconnus pour la programmation donc pas plus simple pour moi. J'avoue ne pas avoir plus envie que cela d'apprendre un autre langage en profondeur après ma journée de travail (total 11h avec trajet).
Avec le temps j'ai compris que travailler orienté objet me rendait la tâche plus aisée et je crée de plus en plus des modules (forme d'objet) que je réutilise plusieurs fois pour des introductions, modifications ou affichage : quel gain de lignes à coder et surtout lors d'une modification ... un seul endroit, pas besoin de rechercher toutes les pages qui utilisent ce bout de code

.

Le jquery pourrait certainement m'aider dans certaines de mes requêtes dynamiques à la volée sur une autre application qui tourne déjà, mais voilà je connais les possibilités mais pas le langage.
Cette caisse sera d’ailleurs liée à l'autre pour la comptabilité et la gestion de stock (aussi et important, la gestion des comptes ... loool).

Le projet n'est pas en local, mais sur l'hébergement mutualisé du club avec ses limitations.

**ddaweb** · 15/08/2016, 11h58

Après discussion avec ceux qui vont utiliser la caisse, je vais en rester avec la solution ' onclick=\"value ++\" '.
Comme est est valable pour la très grande majorité de l'utilisation, rien ne sert de se compliquer plus la tâche

Je mets donc le poste en résolu

Ajouter +1 à un <input> en cliquant sur un nom -> multi modules

JavaScript

Discussions similaires

Partager

Partager