Calculs au changement d'un select

Résolu/Fermé
emrh - Modifié le 9 sept. 2021 à 08:51
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 10 sept. 2021 à 19:27
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 !




<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:

3 réponses

jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 682
9 sept. 2021 à 09:12
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 :
<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 mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
Modifié le 9 sept. 2021 à 09:36
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 ?
0
jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 682 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024
9 sept. 2021 à 12:02
Pas obligatoire, mais un contrôle supplémentaire n'est pas inutile...
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
9 sept. 2021 à 09:31
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 ?
jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 682
9 sept. 2021 à 12:01
Oui
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
Modifié le 9 sept. 2021 à 14:09
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 ?

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)
jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 682
9 sept. 2021 à 14:11
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024
9 sept. 2021 à 14:19
alert(isNaN(TotLi)); => M'affiche true !

D'ailleurs, si cet alert est dans la condition if, comment se fait il qu'il soit exécuté puisque
toutes les conditions ne sont pas remplies ?
0
jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024 4 682 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024
9 sept. 2021 à 17:40
Sans voir ce que tu as écrit .. impossible de te répondre
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > jordane45 Messages postés 38219 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 juillet 2024
10 sept. 2021 à 11:14
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...


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));
    }
}
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024
10 sept. 2021 à 13:31
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.
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.
0