11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis sur une page pour réaliser un calcul directement après avoir tapé un nombre.

Voici le code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr">
<head>
<title> Page Fax Fournisseur</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="javascript">
function calculTotal(pNum){
document.getElementById('montant'+pNum).value =  parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);

for (var n=0;n<document.getElementById('tab').length;n++)
{ document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value+document.getElementById('montant[n]').value); } 

}



</script>

</head>
<body>




<?php

$server="****";
$user="****";
$pass="*****";
$db="pdr";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base'); 


$sql = "SELECT nom_m, pu_m FROM matiere WHERE four_m='EUROGERM'";
    $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
	
$res = mysql_num_rows($req);

    if($res==0)  
        {
        echo '<font color="red">D&eacute;sol&eacute;, aucune matiere est attribue a ce fournisseur.</font>';
        echo '<INPUT TYPE="BUTTON" VALUE=" Retour "onClick="history.back()">';
		echo '<br>';
		}
		
   else
   {
   echo $res;
   echo '<form name="enr"><table id=tab BORDER=0>';
   echo '<tr>';
   echo '<td><u>description du Produit:</u></td><td><u>Prix unitaire:</u></td><td><u>Quantit&eacute;:</u></td><td><u>Total:</u></td>';
	
   $nb = 0;
   while ( $ligne = mysql_fetch_array( $req ))
   { $nb =$nb+1 
   
   
   ?>
   
	
	<tr>
	<td><?php echo $ligne["nom_m"]; ?></td>
	<td><input type="text" id="pu<?php echo $nb;?>" value="<?php echo $ligne["pu_m"]; ?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="qte<?php echo $nb;?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="montant<?php echo $nb;?>"size="7" > &euro; </td>
	</tr>
	<?php
	}

	echo '</table></form>';
	}
	?>
	<br>
	<form name="final">
	<table BORDER=0>
	<tr><td><u>TOTAL:</u></td><td><input type="text" id="qtetotal" size="7"></td><td><input type="text" id="montanttotal"size="7" > &euro; </td>
	</table>
	</form>
	<input type="button" value="Imprimer cette page" onClick="window.print()">
	</body>
</html>
	


Le code fonctionne , mais il faut que je rajoute 2 choses:

La première:

Par défaut sur la page au niveau quantité la valeur est vide, je voudrait rajouter en valeur par defaut 0. Si je rajouter value = "0" je suis obligé de me placer dans chaque case et remettre un 0 pour qu'il puisse faire le calcul du montant pour chaque produit directement. Je voudrais qu'au chargement de la page le 0 soit bien prix en compte pour que dans mon tableaux cela soit comme ceci:

Nom produit|prix unitaire 4.44| quantité 0| total 0

La deuxième:
c'est réaliser le montant total toujours en direct de l'ensemble des produits.

Je n'arrive pas a trouver d'exemple qui pourrait- m'aider à solutionner mes 2 demandes. Donc si quelqu'un pourrait m'aiguillez.

Merci d'avance pour vos réponses, joyeuse fêtes

guigui69
C'est bon j'ai trouver ce qu'il me manquait


voici mon code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr">
<head>
<title> Page Fax Fournisseur</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="javascript">
function calculTotal(pNum){
document.getElementById('montant'+pNum).value =  parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);
var nbLignes = document.getElementById("tab").rows.length;
document.getElementById('montanttotal').value = 0;
for (i=1;i<nbLignes;i++)
{
document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value);  
}




}
</script>

</head>
<body>




<?php

$server="*****";
$user="****";
$pass="*****";
$db="pdr";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base'); 


$sql = "SELECT nom_m, pu_m FROM matiere WHERE four_m='EUROGERM'";
    $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
	
$res = mysql_num_rows($req);

    if($res==0)  
        {
        echo '<font color="red">Désolé, aucune matiere est attribue a ce fournisseur.</font>';
        echo '<INPUT TYPE="BUTTON" VALUE=" Retour "onClick="history.back()">';
		echo '<br>';
		}
		
   else
   {
   echo $res;
   echo '<form name="enr"><table id="tab" BORDER=0>';
   echo '<tr>';
   echo '<td><u>description du Produit:</u></td><td><u>Prix unitaire:</u></td><td><u>Quantité:</u></td><td><u>Total:</u></td>';
	
   $nb = 0;
   while ( $ligne = mysql_fetch_array( $req ))
   { $nb =$nb+1 
   
   
   ?>
   
	
	<tr>
	<td><?php echo $ligne["nom_m"]; ?></td>
	<td><input type="text" id="pu<?php echo $nb;?>" value="<?php echo $ligne["pu_m"]; ?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="qte<?php echo $nb;?>" value="0" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="montant<?php echo $nb;?>" value="0" size="7" > € </td>
	</tr>
	<?php
	}

	echo '</table></form>';
	}
	?>
	<br>
	<form name="final">
	<table BORDER=0>
	<tr><td><u>TOTAL:</u></td><td><input type="text" id="qtetotal" size="7"></td><td><input type="text" id="montanttotal"size="7" > € </td>
	</table>
	</form>
	</body>
</html>
	



a écrit :

var nbLignes = document.getElementById("tab").rows.length;
document.getElementById('montanttotal').value = 0;
for (i=1;i<nbLignes;i++)
{
document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value);
}



Mais il y a un truc bizarre dans certain calcul elle sort beaucoup de chiffre derrière la virgule. quel en est peut la cause ? (regarder image)

ex: 2.15 * 6 = 12.899999999999999 alors que ca devrait faire 12,9.

[U]2 petite question:[/U]

Au niveau javascript peut ton limiter 4 chiffre après la virgule? (comme pour mon soucis juste au dessus).

La page en question après être compléter va êtres imprimer et envoyer par fax. Je sais qu'on peut mettre un bouton imprimer en javascript mais comment faire pour qu'il prenne cette page mais en supprimant ou en rendant invisible les élément géant (exemple le bouton imprimer).

Merci d'avance pour votre aide

guigui69
guigui69 a écrit :
Mais il y a un truc bizarre dans certain calcul elle sort beaucoup de chiffre derrière la virgule. quel en est peut la cause ? (regarder image)

ex: 2.15 * 6 = 12.899999999999999 alors que ca devrait faire 12,9.

Au niveau javascript peut ton limiter 4 chiffre après la virgule? (comme pour mon soucis juste au dessus).
Javascript a une manière de calculer qui produit ça, c'est con mais on y peut rien.
Pour les chiffres après la virgule tu peux tout simplement considérer le nombre comme une chaîne et couper la fin.
guigui69 a écrit :
La page en question après être compléter va êtres imprimer et envoyer par fax. Je sais qu'on peut mettre un bouton imprimer en javascript mais comment faire pour qu'il prenne cette page mais en supprimant ou en rendant invisible les élément géant (exemple le bouton imprimer).
CSS fait ça très bien, il faut faire une feuille de style qui ne s'applique que quand on souhaite imprimer :
<link rel="stylesheet" type="text/css" href="printStyle.css" media="print" />