IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupération id et prix en js


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    Janvier 2012
    Messages
    238
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : Janvier 2012
    Messages : 238
    Par défaut Récupération id et prix en js
    Bonjour à tous et à toutes,
    Toujours dans la réalisation de mon panier en js je voudrais savoir comment récupérer l'id du produit ou les quantités sont entrées dans l'input pour pouvoir ensuite récupérer le prix qui correspond.
    Voici le code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <script>
    function CalculPanier(NbrProduit) {
    var nbr1 = NbrProduit;
    var nbr2 = Number(2);
    var total = (Number(nbr1) * Number(nbr2));
    document.getElementById("totaldon").innerHTML = total;
    }
    function Produit(id, reference, designation, prix) {
            this.id= id;
         this.reference= reference;
            this.prix= prix;
            this.designation= designation;
            this.toString= function() {
                    return this.reference + " " + designation + " "+ prix;
            }
      }
     
      var catalogue= new Array();
      catalogue.push(new Produit(1, "ref 1", "ordinateur", 800));
      catalogue.push(new Produit(2, "ref 2","souris", 20.45));
      catalogue.push(new Produit(3, "ref 3","uniter centrale", 620));
    catalogue.push(new Produit(4, "ref 4","ecran", 120));
      var panier= new Array();
      
     
      function remplirCatalogue() {
            var cat= document.getElementById('cat');
            for (var i in catalogue) {
                var e= document.createElement("p");
                e.value=i;
          var txt= document.createTextNode(catalogue[i].id + " " + catalogue[i].reference + " " + catalogue[i].designation + " " + catalogue[i].prix);
          var txt2=document.createElement("input");
                e.appendChild(txt);
          e.appendChild(txt2);
                cat.appendChild(e);
            }
      }
     
    function ajouterCase(parent, txt) {
      var e= document.createElement("td");
      e.appendChild(document.createTextNode(txt));
      parent.appendChild(e);
    }
     
    function calculerTotal() {
      var tot= 0;
      for (var produit in panier) {
            tot+= panier[produit].prix;
      }
      return tot;
    }
    function ajouter() {
            /*var cat= document.getElementById('cat');
            var sel= cat.options[cat.selectedIndex].value;*/
      var cat= document.getElementById('cat');
            var sel= inputProduit;
            var prod= catalogue[sel];
            panier.push(prod);
            var ligne= document.createElement("tr");
            ajouterCase(ligne,prod.reference);
      ajouterCase(ligne,prod.designation);
            ajouterCase(ligne,prod.prix);
            document.getElementById("pan").appendChild(ligne);
            document.getElementById("tot").innerHTML= calculerTotal();
    }
    remplirCatalogue();
    const inputs = document.querySelectorAll(".ligne_article input");
    inputs.forEach((NbrProduit) => {
      NbrProduit.addEventListener("change", (e) => {
        alert(NbrProduit.value);
        CalculPanier(NbrProduit.value);
      });
    });
    </script>
     
    <div id="cat" class="ligne_article"></div>
        <div class="reduction_impot"><span id="totaldon"></span> € Total Panier</div>
     
    <table id="pan">
      <tr><th>référence</th><th>designation</th><th>prix</th></tr>
    </table>
     
    <p>Total <span id="tot">0</span></p>
    Merci de votre aide

  2. #2
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 310
    Par défaut
    Bonjour,
    si je peux me permettre ta demande est assez flou,
    Infiné il existe plusieurs solutions, mais la question c'est toi tu veux laquelle?
    Récupérer le prix qui correspond directement lors de la saisie
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.querySelector('#machinTruc').addEventListener('keydown',function(){})
    Après une confirmation sur un button pour faire les totaux s'il y a plusieurs produits ?

    Dans tout les cas une idée serait de faire des id faciles à réutiliser , lorsque tu génères ton code html via ton js
    Tu fais en sorte que les spécifité du produit ait pour id un truc comme ca : 1_caracteristique ou 1_produit, tu as l'idée :p
    Et pour ton input quantité 1_qte.
    Comme ca tu peux retrouver éventuellement les catégories de produits concerné.

    Cdt,

  3. #3
    Membre éclairé
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    Janvier 2012
    Messages
    238
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : Janvier 2012
    Messages : 238
    Par défaut
    Bonjour,
    Merci gabi7756 de ton aide.
    Pour affiner ma demande en faite je récupère des produits dans une bdd même si là j'en ai mit quatre pour l'exemple, il va y en avoir environs 200 mais ça c'est pas un problème.

    L'input qui est sur la même ligne que l'id, la référence, la description et le prix des produits qui sont affichés sert à mettre la quantité de produit que l'utilisateur veut ajouter au panier.
    Ce qu'il faudrait c'est que j'arrive à récupérer l'id du produit correspondant à l'input ou une valeur a été renseignée pour pouvoir récupérer le prix et faire les calcules et tous le reste (affichage dans le panier, enregistrement dans la bdd etc...).

    Pour le moment dans mon script le tarif est à 2 pour faire des essaies car je ne sais pas comment faire pour récupérer le tarif qui correspond.

    Je ne souhaite pas de bouton, je voudrais que le calcul se fasse dès que la valeur dans l'input change.

    Je serais très bien le faire en php avec un bouton bien sur mais justement l'idée c'est de faire un truc diffèrent.

    J’espère avoir été un peut plus précis dans ma demande.
    Merci de ton aide.

  4. #4
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 310
    Par défaut
    Bonjour,
    Merci pour ton retour
    Pour ce qui est de récupéré la quantité saisie tu fait un truc comme ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    input.addEventListener("input", updateValue);
     
    function updateValue(e) {
      console.log(e.target.value); // value de l'input
    qte=e.target.value
      console.log(e.target.id); // Id de l'input modifié
    id=e.target.id
    }
    L'evenement input se déclenche dès que la valeur de l'input change.
    Ainsi comme évoqué dans mon dernier post tu as un id à partir du quel tu pourras déterminé le produit concerné par un nommage spécifique.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    id=id.substring(0,1); // La tu récupères l'id 
    var prix_unite = document.querySelector('#'+id+'prix_produit').textContent // Ou value en fonction de ton choix
    // Je te laisse le soins d'enlevé pottentiellement l'unité monétaire derrière ( euro , dollar etc)
    prix_total=prix_unite *qte
    document.querySelector('#'+id+'prix_total').textContent=prix_total
    Donc le code complet un truc du genre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    input.addEventListener("input", updateValue);
     
    function updateValue(e) {
      // console.log(e.target.value); // value de l'input
      // console.log(e.target.id); // Id de l'input modifié
    qte=e.target.value  
    id=e.target.id
    id=id.substring(0,1); // La tu récupères l'id 
    prix_unite = document.querySelector('#'+id+'prix_produit').textContent // Ou value en fonction de ton choix
    // Je te laisse le soins d'enlevé pottentiellement l'unité monétaire derrière ( euro , dollar etc)
    prix_total=prix_unite *qte
    document.querySelector('#'+id+'prix_total').textContent=prix_total
    }
    Oublié de dire mais prévois un input number ca sera plus simple et ca évitera de tapé des lettres

    Pour l'histoire du reste et enregistrement sur la bdd, on va pas le faire à chaque fois , laisse toi un bouton de validation pour confirmé les quantités saisies ou ton panier

  5. #5
    Membre éclairé
    Homme Profil pro
    Educateur spécialisé
    Inscrit en
    Janvier 2012
    Messages
    238
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Educateur spécialisé
    Secteur : Santé

    Informations forums :
    Inscription : Janvier 2012
    Messages : 238
    Par défaut
    Bonjour gabi7756 et merci de tout aide,
    Je dois t'avouais que je n'y comprend pas grand chose.
    Je vais m'acheter un livre sur le js histoire de me dégrossir un peu, si tu en connais un bien n'hésite pas à me donner le titre.
    Pour mon projet je l'ai fait en php mais j'aimerais bien pouvoir le faire en js pour ma culture personnel et par ce que j'aime bien le js, je trouve que ça dynamise bien un site.

    Pour le type de l'input, oui je vais mettre number mais pour l'instant je m'étais concentré sur le fonctionnement de base.
    Je vais mettre mon code avec des commentaires fonction par fonction pour voir si j'ai bien compris et si ça te dérange pas de me donner des petites explication j'en serai ravi.

  6. #6
    Membre expérimenté
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 458
    Par défaut
    bonjour;
    Il y a des tas de ressources en ligne concernant JS.
    je peux te recommander entres autres les cours de Pierre Giraud (qui sont également disponibles dans des versions PDF.
    Cordialement;

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Prix SQLServer
    Par Pasiphae dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 19/07/2004, 15h16
  2. calcul prix sql
    Par Damien69 dans le forum Langage SQL
    Réponses: 7
    Dernier message: 04/05/2004, 09h00
  3. [Info] J2EE prix licence?
    Par Piolet dans le forum Java EE
    Réponses: 10
    Dernier message: 21/04/2004, 10h25
  4. Calcul d'un prix
    Par maki dans le forum Flash
    Réponses: 16
    Dernier message: 26/09/2003, 17h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo