Sujet Précédent Sujet Suivant

Calcul automatique

Résolu/Fermé
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 13 mai 2016 à 23:10
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 14 mai 2016 à 08:55
Bonjour tout le monde,
J'ai déjà poster des questions sur javascript pour un site que je fais, mais je viens de la recommencer entièrement en partant avec une base de donnée, donc les réponses ne m'aide plus ^^.

J'ai un tableau avec 6 colonnes pour faire un bon de commande

|désignation | degré | capacité | prix public | prix CE | quantité |


la colonne quantité est faite avec 1 input par ligne (ou l'utilisateur inscrira le nombre qu'il souhaite)

à la fin du tableau j'ai mon input total global ou j'aimerai faire ce calcul:
prix CE x quantite pour chaque ligne
puis additionner le total par ligne pour l'inscrire dans mon input total global

Pour l'instant je génère mon tableau en automatique via php et ma bdd et c'est la le Hic car je ne sais pas générer un calcul automatique.
J'arrive à donner un id a chaque input qui est different (issu d'une colonne de ma bdd) mais je ne sais pas comment les exploiter.

J'espère avoir été clair, même si j'en doute un peu...

voici mon code (la connexion à la base de donnée est sur un fichier à part)

Merci pour votre aide 


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<LINK rel="stylesheet" type="text/css" title="Design" media="screen" href="style/styletest.css" /> 
		<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
		<title>La boutique du CE</title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		
		<?php include("config/config_pepere.php"); ?>
	</head>
	
	<body>
	<?php include("include/script_slideshow.html"); ?>
		<div id="bloc_page">
			<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1200px; height: 350px; overflow: hidden; visibility: hidden;">
				<?php include("include/slideshow.html"); ?>
				<?php include("include/logo.html"); ?>
				<?php include("include/menu.html"); ?>
			</div>
			<div id="news"><?php include("include/news.html"); ?></div>
			
			
			
			
		<section>
			<aside>
				<table>
					<tr>
					<td class="centrage" style="width:250px;">Désignation</td>
					<td class="centrage" style="width:50px">Degré</td>
					<td class="centrage" style="width:50px">Capacité</td>
					<td class="centrage" style="width:50px">Prix public</td>
					<td class="centrage" style="width:50px">prix CE</td>
					<td class="centrage" style="width:50px">Quantité</td>
					</tr>
					<?php

					
					$reponse = $bdd->query('SELECT * FROM brasserie_pepere');

					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
					?>
						<center>
						
							<tr>
								<td style="width:250px"><center><?php echo $donnees['designation']; ?><br /> <?php echo $donnees['surnom']; ?></center></td>
								<td class="centrage" style="width:45px"><?php echo $donnees['degre']; ?></td>
								<td class="centrage" style="width:45px"><?php echo $donnees['capacite']; ?></td>
								<td class="centrage" style="width:45px"><?php echo $donnees['prix']; ?>€</td>
								<td class="centrage" style="width:45px"><?php echo $donnees['prix_ce']; ?>€</td>
								<td class="centrage" style="width:70px">
									<img src="image/moins.png" class="moins" onclick="calcul();"/>
									<img src="image/plus.png" class="plus" onclick="calcul();"/>
									<input id="<?php echo $donnees['id_biere']; ?>"type="text" style="width:20px;text-align:center;" value="0" readonly="readonly">
								</td>
							</tr>
					   
					   </center>
					   
					<?php
					//$id = $donnees['id_biere'];
					}

					$reponse->closeCursor(); // Termine le traitement de la requête
					
					?>
					<tr>
						<td colspan="5" style="border:none;text-align:right;padding-right: 10px;">Total </td>
						<td><center><input id="total_commande" type="text" style="width:50px;text-align:center;" value="0.00" readonly="readonly">€</center></td>
					</tr>
				</table>
				
			</aside>
		</section>

		<footer><?php include("include/footer.html"); ?></footer>
		</div>
		
	<script type="text/javascript">	
	function calcul(){ 
	
	
	
	
	//<?php
		
	//?>		
		//var msg='<?PHP echo $id;?>';
		
		//var message = document.getElementById(msg);
		//alert(message.value);
	//}
	//</script>
		
		
		<script src="js/pepere2.js" type="text/javascript"></script>
	</body>

</html>





6 réponses

Réponse 1 / 6
Jonor
14 mai 2016 à 00:39
'soir

Comme souvent en programmation pour des tâches simples il y a plusieurs façons de faire. Celles ci pourront influer sur le programme si elles sont plus ou moins adapté au but voulu. L'essentiel est donc d'avoir une conception et analyse cohérente pour organiser les éléments du programme. Il est INDISPENSABLE en développement informatique et dans le web de séparer le résultat voulu en différentes parties:
_l'affichage et la présentation. C'est tout le contenu écris dans la page.
_les informations utiles au système d'informations= les données qui sont retenues par la base et que le programme utilisera
_la partie programme qui va permettre de gérer les deux autres aspects et les coordonnés ensemble

Par exemple pour parler technique plutôt que fonctionnement plusieurs solutions:

vous pouvez utiliser les valeurs écrites dans la page avec javascript(le DOM qui est la liste de tous les éléments de la page et leur contenu et attributs).
0
Jonor
14 mai 2016 à 00:40
ex:
<td class="centrage" style="width:45px">
<p id="prix"><?php echo $donnees['prix'];</p> ?>€</td>

Avec la fonction getElementById on obtient toute la balise(objet en programmation, c'est un regroupement de variables et méthodes pour définir des 'modèles') repérée par l'identifiant id="prix"

Avec la fonction .value on obtient la "valeur" de son contenu, donc le prix marqué par PHP(j'ai mis un texte de paragraphe(balise 'p') pour séparer le syùmbole € qui sinon serais pris dans la valeur de la cellulle du tableau.

document.getElementById('prix').value correspond donc à la valeur écrite par PHP à partir des ressources fournies par la base.

En rajoutant e formulaire et ses champs pour mettre le nombre d'article on peut pense à ça pour chaque ligne/article:

<input type='number' id="nombrearticles" />

Et donc pour obtenir le montant pour cette ligne d'article l'opération est une simple multiplication des 2 valeurs inscrites dans la page:

var totalligne=document.getElementById('prix')*document.ghetElementById('nombrearticles');
0
Réponse 2 / 6
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
14 mai 2016 à 01:45
Merci beaucoup d'avoir pris le temps de me répondre jonor

Cette partie je l'avais en effet essayé dans l'ancien site et cela marchait très bien, je m'étais débrouillé pour arriver à faire tous les calculs.
Avant j'écrivais le code javascript en prenant tous les id que j'avais créé puisque j'écrivais le <table> moi-même.

Le problème ici est que le <table> est généré d'après la base de donnée.
Je ne sais pas comment je pourrais écrire un code javascript qui s'automatiserait d'après les données générées.
En clair, je voudrais que le code marche même si je rajoute des éléments à ma base de donnée. Faire un système de boucle qui s'accorderai aux données. Les "id" étant aléatoire celon les donnée que j'importe je ne sais pas comment faire.

Par exemple j'aimerai que le code effectue de manière automatique ceci:
-prends le prixCE de la premiere ligne et multiplie le avec l'input de la première ligne.
-fais pareil pour toutes les lignes
-Apres additionne le résultat des lignes et inscrit le dans l'input total_global

Etant donné que les éléments de la base de donnée peuvent changer, il me faut faire une boucle qui génère toute seule les résultats, mais avec mon pauvre niveau de débutant je suis dépassé.
0
Réponse 3 / 6
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
14 mai 2016 à 01:51
Remarque je viens de penser en vous relisant à ceci:
Peut être si je créé un id="prix1" et un id="input1", puis je les incrémenter pour chaque ligne afin de faire :
un id="prix2" avec un id="input2"
un id="prix3" avec un id="input3"
un id="prix4" avec un id="input4"

Vu que je connais dans ce cas le "id" je peut faire:
(prix1 x input1) + (prix2 x input2) ...

Je ne sais pas trop si c'est possible
0
Réponse 4 / 6
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
Modifié par ced3c le 14/05/2016 à 02:50
pour l'instant j'arrive à faire cela:

générer in id pour le prix et un id pour l'inpout 


<table>
     <tr>
     <td class="centrage" style="width:250px;">Désignation</td>
     <td class="centrage" style="width:50px">Degré</td>
     <td class="centrage" style="width:50px">Capacité</td>
     <td class="centrage" style="width:50px">Prix public</td>
     <td class="centrage" style="width:50px">prix CE</td>
     <td class="centrage" style="width:50px">Quantité</td>
     </tr>
     <?php

     
     $reponse = $bdd->query('SELECT * FROM brasserie_pepere');
     $i = 1;
     $p = 1;
     // On affiche chaque entrée une à une
     while ($donnees = $reponse->fetch())
     {
     ?>
      <center>
      
       <tr>
        <td style="width:250px"><center><?php echo $donnees['designation']; ?><br /> <?php echo $donnees['surnom']; ?></center></td>
        <td class="centrage" style="width:45px"><?php echo $donnees['degre']; ?></td>
        <td class="centrage" style="width:45px"><?php echo $donnees['capacite']; ?></td>
        <td class="centrage" style="width:45px"><?php echo $donnees['prix']; ?>€</td>
        <td class="centrage" style="width:45px"><p id="prix<?php echo $p;?>"><?php echo $donnees['prix_ce']; ?></p></td>
        <td class="centrage" style="width:70px">
         <img src="image/moins.png" class="moins" onclick="calcul();"/>
         <img src="image/plus.png" class="plus" onclick="calcul();"/>
         <input id="input<?php echo $i;?>"type="text" style="width:20px;text-align:center;" value="2" readonly="readonly">
        </td>
       </tr>
        
        </center>
        
     <?php
     $i = $i + 1;
     $p = $p + 1;
     //$id = $donnees['id_biere'];
     }

     $reponse->closeCursor(); // Termine le traitement de la requête
     
     ?>
     <tr>
      <td colspan="5" style="border:none;text-align:right;padding-right: 10px;">Total </td>
      <td><center><input id="total_commande" type="text" style="width:50px;text-align:center;" value="0.00" readonly="readonly">€</center></td>
     </tr>
    </table>

Puis je calcule comme ceci: 

 function calcul(){ 
 var total_commande = document.getElementById('total_commande');
 var prix = parseFloat(document.getElementById('prix1').value);
 var input = document.getElementById('input1').value;
 var total_ligne = prix * input;
 
 total_commande.value = total_ligne;
 }


probleme: var prix me renvoi une valeur "NAN" et je n'ai pas de problème dans la console du navigateur
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
14 mai 2016 à 08:44
On dirait que je ne peux pas récupérer la valeur généré par php.

Existe t il une façon de la récupérer ?

dans cet exemple:
valeur à récupérer 
<td class="centrage" style="width:45px"><p id="prix<?php echo $p;?>"><?php echo $donnees['prix_ce']; ?></p></td>


id="prix<?php echo $p;?>" indique bien quand j'inspecte la page : prix1
et <?php echo $donnees['prix_ce']; ?> indique: 2.25 


var total_commande = document.getElementById('total_commande');
var prix = parseFloat(document.getElementById('prix1').value);

total_commande.value = prix;



normalement total_commande.value devrais me retourner la valeur "2.25" mais à la place j'ai un joli NAN

Je ne vois pas quelle est mon erreur.
0
Réponse 6 / 6
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
Modifié par ced3c le 14/05/2016 à 08:56
pour info je viens de trouver

var prix = document.getElementById("prix1").innerHTML;
plus qu'a faire une boucle et cela devrais marcher

voilou et merci jonor pour m'avoir aiguiller
0