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 - 12 mai 2016 à 10:54
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 12 mai 2016 à 14:13

Bonjour tout le monde,
J'ai un input accompagné de deux images + et - qui l'incrémente ou le décrémente.
Je voudrais lancer un calcul automatique lors du clic sur l'une ou l'autre des images. c'est un système de bon de commande.

le calcul est est en fait: valeur du input multiplié par prix

(pour lisibilité je n'ai mis qu'un seul input mais il y en a plusieurs qui s'additionne à la fin dans un input "total_pepere")

Pour l'instant j'ai :
HTML


            <tr>
                <td class="titre_biere_commande" rowspan="2"><?php echo "$article_pepere_1  $degre2"?></td>
                <td><?php echo "$capacite33"?></td>
                <td><?php echo "$prix1"?></td>
                <td class="taille_td_input">
					<img src="image/moins.png" class="moins" onclick="moins1_33()" onclick="calcul()"/>
					<input id="blonde33" name="blonde33" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly">
					<img src="image/plus.png" class="plus" onclick="plus1_33()" onclick="calcul()"/></td>
            </tr>
            <tr>
                <td><?php echo "$capacite75"?></td>
                <td><?php echo "$prix2"?></td>
                <td class="taille_td_input">
					<img src="image/moins.png" class="moins" onclick="moins1_75()"/>
					<input id="blonde75" min="0" name="blonde75" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly">
					<img src="image/plus.png" class="plus" onclick="plus1_75()"/>
				</td>
            </tr>

ET code JAVASCRIPT (dans fichier a part)


    //calcul du prix global de la commande
    function calcul(){ 
	var total = document.getElementById('total_pepere');
		// calcul du cout total de la commande          
        var prix1 = "2.25";
        var prix2 = "4";
        var prix3 = "13.45";
        var prix4 = "12.00";
        
            var tot_blonde33 = parseFloat(document.getElementById('blonde33').value) * parseFloat(prix1);
            var tot_blonde75 = parseFloat(document.getElementById('blonde75').value)* parseFloat(prix2);
            var tot_ambree33 = parseFloat(document.getElementById('ambree33').value)* parseFloat(prix1);
            var tot_ambree75 = parseFloat(document.getElementById('ambree75').value)* parseFloat(prix2);
            var tot_blanche33 = parseFloat(document.getElementById('blanche33').value)* parseFloat(prix1);
            var tot_blanche75 = parseFloat(document.getElementById('blanche75').value)* parseFloat(prix2);
            var tot_rousse33 = parseFloat(document.getElementById('rousse33').value)* parseFloat(prix1);
            var tot_rousse75 = parseFloat(document.getElementById('rousse75').value)* parseFloat(prix2);
            var tot_cerise33 = parseFloat(document.getElementById('cerise33').value)* parseFloat(prix1);
            var tot_cerise75 = parseFloat(document.getElementById('cerise75').value)* parseFloat(prix2);
			var tot_pack1 = parseFloat(document.getElementById('pack1').value)* parseFloat(prix3);
            var tot_pack2 = parseFloat(document.getElementById('pack2').value)* parseFloat(prix4);
        
        var resultat =  parseFloat(tot_blonde33) +
                        parseFloat(tot_blonde75) +
                        parseFloat(tot_ambree33) +
                        parseFloat(tot_ambree75) +
                        parseFloat(tot_blanche33) +
                        parseFloat(tot_blanche75) +
                        parseFloat(tot_rousse33) +
                        parseFloat(tot_rousse75) +
                        parseFloat(tot_cerise33) +
                        parseFloat(tot_cerise75) +
						parseFloat(tot_pack1) +
						parseFloat(tot_pack2);
                                        
            var resultat = parseFloat(Math.round(resultat * 100) / 100).toFixed(2);
            total_pepere.value = resultat;
    }

Merci de toute aide ou conseil

A voir également:

Calcul automatique
Calcul moyenne excel - Guide
Recherche automatique des chaînes ne fonctionne pas - Guide
Message automatique thunderbird - Guide
Gmail libellé automatique - Guide
Sommaire automatique word - Guide

4 réponses

Réponse 1 / 4

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
12 mai 2016 à 11:13

Salut,

Quel est la question/le problème ?

As tu des messages d'erreurs javascript dans la console de développement du navigateur (raccourci F12, onglet Console) ?

Peux tu stp nous poster ton code html sans le code php (en recopiant le code source de la page du navigateur par exemple) car nous ne pouvons pas deviner par quoi le code php est remplacé au chargement de la page ?

Bonne journée,

Réponse 2 / 4

ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
12 mai 2016 à 11:30

Le problème est que je n'arrive pas à faire le calcul, ou plutôt à le lancer.

Pas de problème dans la console

Merci du coup de main Pitet

Voici le formulaire complet:


<form id="formulaire" form method="post" name="formulaire" action="merci.html" >
        <table id="tableau2">
            <tr>
                <td colspan="4" style="border:0px;">
				<br />
                    <center>
                        <a href="http://www.labrasseriedupepere.fr/"><img alt="LA BRASSERIE DU PEPERE" src="image/brasserie_pepere/logo-brasseriedupepere.png" title=""></a>
                    </center>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="border:0px;">La brasserie Pépère accorde 20% de remise sur l'ensemble de ses produits</td>
            </tr>
            <tr>
                <td style="border:none; background-color: transparent;"></td>
                <td style="width:80px;">Contenance</td>
                <td style="width:80px;">Prix CE</td>
                <td style="width:60px;">Quantité<br>désirée</td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent;border:none; height:5px;"></tr>
			
		<!-- Biere blonde -->
            <tr>
                <td class="titre_biere_commande" rowspan="2">Bière Blonde "Cul-Sec"  5,5°</td>
                <td>33cl</td>
                <td>2,25€</td>
                <td class="taille_td_input">
					<img src="image/moins.png" class="moins" onclick="moins1_33()" onclick="calcul()"/>
					<input id="blonde33" name="blonde33" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly">
					<img src="image/plus.png" class="plus" onclick="plus1_33()" onclick="calcul()"/></td>
            </tr>
            <tr>
                <td>75cl</td>
                <td>4,00€</td>
                <td class="taille_td_input">
					<img src="image/moins.png" class="moins" onclick="moins1_75()"/>
					<input id="blonde75" min="0" name="blonde75" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly">
					<img src="image/plus.png" class="plus" onclick="plus1_75()"/>
				</td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Biere ambree -->
            <tr>
                <td class="titre_biere_commande" rowspan="2">Bière Ambrée "Cul-Noir"  6,5°</td>
                <td>33cl</td>
                <td>2,25€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins2_33()"/><input id="ambree33" min="0" name="ambree33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus2_33()"/></td>
            </tr>
            <tr>
                <td>75cl</td>
                <td>4,00€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins2_75()"/><input id="ambree75" min="0" name="ambree75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus2_75()"/></td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Biere blanche -->
            <tr>
                <td class="titre_biere_commande" rowspan="2">Bière Blanche "Cul-Blanc"  5°</td>
                <td>33cl</td>
                <td>2,25€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins3_33()"/><input id="blanche33" min="0" name="blanche33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus3_33()"/></td>
            </tr>
            <tr>
                <td>75cl</td>
                <td>4,00€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins3_75()"/><input id="blanche75" min="0" name="blanche75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus3_75()"/></td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Biere rousse -->
            <tr>
                <td class="titre_biere_commande" rowspan="2">Bière Rousse, miel et châtaignes "Cul-Roux"  6,5°</td>
                <td>33cl</td>
                <td>2,25€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins4_33()"/><input id="rousse33" min="0" name="rousse33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus4_33()"/></td>
            </tr>
            <tr>
                <td>75cl</td>
                <td>4,00€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins4_75()"/><input id="rousse75" min="0" name="rousse75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus4_75()"/></td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Biere cerise -->
            <tr>
                <td class="titre_biere_commande" rowspan="2">Bière cerise-gingembre "Cul-Rouge"  5°</td>
                <td>33cl</td>
                <td>2,25€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins5_33()"/><input id="cerise33" min="0" name="cerise33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"><img src="image/plus.png" class="plus" onclick="plus5_33()"/></td>
            </tr>
            <tr>
                <td>75cl</td>
                <td>4,00€</td>
                <td class="taille_td_input"><img src="image/moins.png" class="moins" onclick="moins5_75()"/> <input id="cerise75" min="0" name="cerise75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0" readonly="readonly"> <img src="image/plus.png" class="plus" onclick="plus5_75()"/></td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Pack 6 bieres 33cl -->
            <tr>
                <td class="titre_biere_commande">Pack Découverte<br />des 6 bières</td>
                <td>33cl</td>
                <td>13,45€</td>
                <td><input id="pack1" min="0" name="pack1" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
            </tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
		<!-- Pack 3 bieres 75cl -->
            <tr>
                <td class="titre_biere_commande">Tripack Découverte<br />de 3 bières</td>
                <td>75cl</td>
                <td>12,00€</td>
                <td><input id="pack2" min="0" name="pack2" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" onkeypress="calcul_nombre_biere()" style="text-align:center;width:30px;" type="text" value="0"></td>
            </tr>
			
		<!-- choix des 3 bieres du tri pack -->
            <tr>
                <td>Merci de choisir vos bières pour le tripack<br /><br /><span style="font-size:14px;">Nombre de bières à choisir : </span><input id="nombre_biere" name="nombre_biere" min="0" type="text" value="0" style="font-weight:bolder;text-align:center;width:20px;background-color:transparent;font-size:14px"></td>
				<td colspan="5" style="text-align:left;">
                <label><input id="blonde" min="0" name="blonde" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"> Bière blonde</label><br />
                <label><input id="ambree" min="0" name="ambree" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"> Bière ambrée</label><br />
                <label><input id="blanche" min="0" name="blanche" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"> Bière blanche</label><br />
                <label><input id="rousse" min="0" name="rousse" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"> Bière rousse</label><br />
                <label><input id="cerise" min="0" name="cerise" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"> Bière cerise</label><br />
				</td>
			</tr>
			
		<!-- Espace dans le tableau -->
            <tr style="background-color: transparent; border:none; height:5px;"></tr>
			
            <tr>
                <td colspan="2" style="background-color: transparent; border:none;"></td>
                <td style="border:0px;">Total</td>
                <td style="border:0px;"><div style="min-width:100px;"><input id="total_pepere" name="total_pepere" style="text-align:center;width:70px;" type="text" value="0">€</div></td>
            </tr>
		</table>	
			<br />
			<br />
			<div id="coordonnee" style="margin-right:150px;text-align:right;position: right;">
            <label><span style="color:red;">*</span>Nom : <input id="nom" name="nom" style="width:130px;"  type="text" placeholder="Nom" required></label><br />
			<label><span style="color:red;">*</span>Prénom : <input id="prenom" name="prenom" style="width:130px;margin-top:5px;" type="text" placeholder="Prénom" required></label><br />
			<label>Email : <input id="email" name="email" style="width:130px;margin-top:5px;" type="email" placeholder="Email" required></label><br />
			<label>Tel : <input id="tel" name="tel" style="50px;width:130px;margin-top:5px;"type="tel" placeholder="Téléphone" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"><br /></label>
			<p style="color:red;font-size: 12px;margin-right:15px;">* renseignement obligatoire</p>
			</div>
			<br />
            <center><input name="Submit" type="submit" onclick="valider()" value="Valider la commande" style="font-weight:bold;"></center>
    </form>

Réponse 3 / 4

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
12 mai 2016 à 13:49

Le problème vient du fait que tu utilises 2 attributs onclick sur les inputs pour déclencher l'action "plus" ou "moins" et pour le calcul, or il n'est pas possible d'avoir deux attributs onclick, seul le premier est pris en compte.

Tu peux néanmoins appeler des deux actions à la suite dans un seul attribut onclick :

<img src="image/moins.png" class="moins" onclick="moins1_33(); calcul();" />

Réponse 4 / 4

ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
12 mai 2016 à 14:13

Merci beaucoup Pitet, tout fonctionne.
Je ne savais pas qu'il fallait déclarer 2 onclic de cette façon. je le sais à présent.

Merci beaucoup.