Calculs au changement d'un select

Résolu
emrh -  
emrh Messages postés 439 Statut Membre -
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>

3 réponses

  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    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>
    

    0
    1. emrh Messages postés 439 Statut Membre 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 ?
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831 > emrh Messages postés 439 Statut Membre
         
        Pas obligatoire, mais un contrôle supplémentaire n'est pas inutile...
        0
  2. emrh Messages postés 439 Statut Membre 20
     
    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 ?
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      Oui
      0
  3. emrh Messages postés 439 Statut Membre 20
     
    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)
    0
    1. emrh Messages postés 439 Statut Membre 20 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
       
      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
    2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831 > emrh Messages postés 439 Statut Membre
       
      Sans voir ce que tu as écrit .. impossible de te répondre
      0
    3. emrh Messages postés 439 Statut Membre 20 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
       
      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
    4. Pitet Messages postés 2845 Statut Membre 530 > emrh Messages postés 439 Statut Membre
       
      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