Calculs au changement d'un select
Résolu
emrh
-
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je travaille actuellement sur le développement d'une web application de création de devis...
Un SELECT relié à la table "prestations" de ma base de donnée propose différents services. Chaque changement de ce select modifie l'INPUT à sa droite pour afficher le prix de la prestation sélectionnée issu de la même table de la même base de donnée (cette partie là fonctionne bien !). Un autre INPUT, à droite également, propose de saisir une quantité... Jusque là rien de bien révolutionnaire. Enfin un troisième INPUT (inaccessible en saisie) calcule le prix de la prestation x la quantité...
Le prix et la quantité interagissent bien ensemble (ouf) mais le changement du SELECT fonctionne de manière chaotique une fois qu'une première sélection avait été faite... des fois, le total se recalcule, des fois non !!!
Voici mon code, merci d'avance à ceux qui pourraient m'aider !
Je travaille actuellement sur le développement d'une web application de création de devis...
Un SELECT relié à la table "prestations" de ma base de donnée propose différents services. Chaque changement de ce select modifie l'INPUT à sa droite pour afficher le prix de la prestation sélectionnée issu de la même table de la même base de donnée (cette partie là fonctionne bien !). Un autre INPUT, à droite également, propose de saisir une quantité... Jusque là rien de bien révolutionnaire. Enfin un troisième INPUT (inaccessible en saisie) calcule le prix de la prestation x la quantité...
Le prix et la quantité interagissent bien ensemble (ouf) mais le changement du SELECT fonctionne de manière chaotique une fois qu'une première sélection avait été faite... des fois, le total se recalcule, des fois non !!!
Voici mon code, merci d'avance à ceux qui pourraient m'aider !
<form id="formulaire" name="formulaire" method="post" action="contrat-ajout2.php"> <select name="prestation" id="prestation" required="" > <option value="">Choisir une prestation</option> <?php foreach($prestations as $valeur3) { echo '<option value="' . $valeur3['id_prestation'] . '">' . $valeur3['designation'] . '</option>'; } ?> </select> <input name="prix" id="prix" type="text" value="" onkeypress="return chiffres(event);"/> <input name="quantite" id="quantite" type="text" value="" onkeypress="return chiffres(event);"/> <input name="total" id="total" type="text" value="" readonly="true;"/> <input type="button" value="AJOUTER" onclick="plus_contrat();"> <br /> <input type="reset" value="EFFACER"> <input type="submit" value="VALIDER"> <input type="text" name="chaine_contrat" id="chaine_contrat" style="visibility: hidden;"> </form>
<!-- ######### SCRIPT MISE À JOUR TARIFS ############--> <script type="text/javascript"> $(function(){ $("#prestation").change(function(){ var choix = $(this).val(); $.post("verifcontrat.php", { verifcontrat.php "valeurChoisie" : choix }) .done(function(data){ document.getElementById("prix").value = data ; }) .fail(function(){ alert('Accès aux tarifs impossible actuellement !'); }); }) }) </script> <!-- ############# CALCUL TOTAL PRESTATION ###########--> <script type="text/javascript" language="javascript"> $("#prestation, #prix, #quantite").change(function(){ var prix_ligne = prix.value; var quantite_ligne = quantite.value; var TotLi = prix_ligne*quantite_ligne; document.getElementById("total").value = TotLi; }) </script>
A voir également:
- Calculs au changement d'un select
- Changement dns - Guide
- Changement d'écriture facebook - Guide
- Changement d'heure - Guide
- Changement clavier azerty - Guide
- Changement carte graphique - Guide
3 réponses
Bonjour,
Attention, par défaut les appels ajax sont asynchrones...
Il y a donc certainement des fois où la réponse renvoyée du serveur arrive après le calcul ..
Pour ça, je t'invite à modifier ton code comme suit :
Attention, par défaut les appels ajax sont asynchrones...
Il y a donc certainement des fois où la réponse renvoyée du serveur arrive après le calcul ..
Pour ça, je t'invite à modifier ton code comme suit :
<script type="text/javascript"> // ######### SCRIPT MISE À JOUR TARIFS ############ $(function(){ $("#prestation").change(function(){ var choix = $(this).val(); $.post("verifcontrat.php", { verifcontrat.php "valeurChoisie" : choix }) .done(function(data){ document.getElementById("prix").value = data ; majPrix(); }) .fail(function(){ alert('Accès aux tarifs impossible actuellement !'); }); }); }); // ############# CALCUL TOTAL PRESTATION ########### $("#quantite").change(function(){ majPrix(); }); function majPrix(){ var prix_ligne = parseFloat(prix.value); var quantite_ligne = parseFloat(quantite.value); var TotLi = prix_ligne*quantite_ligne; document.getElementById("total").value = TotLi; } </script>
emrh
Messages postés
427
Date d'inscription
Statut
Membre
Dernière intervention
20
le parseFloat est-il obligatoire sur mes input prix et quantité si j'ai un script de contrôle sur l'obligation de saisie de chiffres ?
jordane45
Messages postés
38486
Date d'inscription
Statut
Modérateur
Dernière intervention
4 752
>
emrh
Messages postés
427
Date d'inscription
Statut
Membre
Dernière intervention
Pas obligatoire, mais un contrôle supplémentaire n'est pas inutile...
MERCI jordan45 !!!!
Ca fonctionne, super...
J'ai retiré le 2ème verifcontrat.php en ligne 6 et maintenant les calculs se font à chaque fois.
Tu as donc ajouté un appel à une fonction de calcul majPrix() au retour de l'appel Ajax...
Mais si je veux faire une remise commerciale en modifiant le prix proposé par mon select, il faut bien que j'ajoute #prix à $("#quantite").change(function(){
non ?
Comme ça :
$("#quantite, #prix").change(function(){
Cette syntaxe est informatiquement correcte ?
Ca fonctionne, super...
J'ai retiré le 2ème verifcontrat.php en ligne 6 et maintenant les calculs se font à chaque fois.
Tu as donc ajouté un appel à une fonction de calcul majPrix() au retour de l'appel Ajax...
Mais si je veux faire une remise commerciale en modifiant le prix proposé par mon select, il faut bien que j'ajoute #prix à $("#quantite").change(function(){
non ?
Comme ça :
$("#quantite, #prix").change(function(){
Cette syntaxe est informatiquement correcte ?
Merci pour ton aide, rapidement résolu tout ça...
Je profite encore un peu de tes connaissance si tu veux bien ?
Si je veux éviter NaN dans l'INPUT total pourquoi la condition que j'ai écrite
ne fonctionne pas ?
(!=0 plutôt que >0 car je veux pouvoir faire des remises -1 par exemple)
Je profite encore un peu de tes connaissance si tu veux bien ?
Si je veux éviter NaN dans l'INPUT total pourquoi la condition que j'ai écrite
ne fonctionne pas ?
function majPrix(){ var prix_ligne = parseFloat(prix.value); var quantite_ligne = parseFloat(quantite.value); if (prix_ligne !=0 && prix_ligne !="" && quantite_ligne !=0 && quantite_ligne !="") { var TotLi = prix_ligne*quantite_ligne; document.getElementById("total").value = TotLi; } }
(!=0 plutôt que >0 car je veux pouvoir faire des remises -1 par exemple)
Bonjour
Verifie si c'est Nan
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN
Verifie si c'est Nan
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN
La commande alert(isNaN(TotLi)); m'affiche true dès que je sélectionne une prestation
et true aussitôt après la sortie d'un champ input quantié ou input prix en ayant saisi
5 par exemple puisque de toutes façons j'ai une fonction qui m'interdit de saisir autre
chose qu'un chiffre...
et true aussitôt après la sortie d'un champ input quantié ou input prix en ayant saisi
5 par exemple puisque de toutes façons j'ai une fonction qui m'interdit de saisir autre
chose qu'un chiffre...
function majPrix(){ var prix_ligne = parseFloat(prix.value); var quantite_ligne = parseFloat(quantite.value); if (prix_ligne !=0 && prix_ligne !="" && quantite_ligne !=0 && quantite_ligne !="") { var TotLi = prix_ligne*quantite_ligne; document.getElementById("total").value = TotLi; alert(isNaN(TotLi)); } }
Bonjour,
Concernant le fait que l'alert s'affiche, il faut effectivement corriger les conditions pour vérifier que le prix ou la quantité ne soit pas égal à NaN. Au passage, pas besoin de vérifier si les variables sont différentes d'une chaine vide puisque parseFloat() retourne soit un nombre, soit NaN, mais jamais une chaine vide.
Néanmoins ceci ne règle pas le fait que isNaN(TotLi) retourne true si tu saisis des nombres dans les input, en faisant quelques tests simples je n'ai pas réussi à reproduire l'incident.
P-e un effet de bord des autres fonctions javascript (notamment les fonctions qui interdisent de saisir autre chose qu'un chiffre, qui pourrait d'ailleurs être éventuellement remplacées par des input type="number") ?
Essaye d'ajouter des alert() ou console.log() pour vérifier les valeurs des variables prix_ligne et quantite_ligne dans la fonction majPrix.
Concernant le fait que l'alert s'affiche, il faut effectivement corriger les conditions pour vérifier que le prix ou la quantité ne soit pas égal à NaN. Au passage, pas besoin de vérifier si les variables sont différentes d'une chaine vide puisque parseFloat() retourne soit un nombre, soit NaN, mais jamais une chaine vide.
function majPrix(){ var prix_ligne = parseFloat(prix.value); var quantite_ligne = parseFloat(quantite.value); if (!isNaN(prix_ligne) && prix_ligne != 0 && !isNaN(quantite_ligne) && quantite_ligne != 0) { var TotLi = prix_ligne*quantite_ligne; document.getElementById("total").value = TotLi; alert(isNaN(TotLi)); } }
Néanmoins ceci ne règle pas le fait que isNaN(TotLi) retourne true si tu saisis des nombres dans les input, en faisant quelques tests simples je n'ai pas réussi à reproduire l'incident.
P-e un effet de bord des autres fonctions javascript (notamment les fonctions qui interdisent de saisir autre chose qu'un chiffre, qui pourrait d'ailleurs être éventuellement remplacées par des input type="number") ?
Essaye d'ajouter des alert() ou console.log() pour vérifier les valeurs des variables prix_ligne et quantite_ligne dans la fonction majPrix.