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

jQuery Discussion :

Mettre le produit de 2 INPUTs dans un autre INPUT


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Janvier 2018
    Messages
    300
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : Janvier 2018
    Messages : 300
    Par défaut Mettre le produit de 2 INPUTs dans un autre INPUT
    Bonjour à tous,
    J'ai 2 inputs. J'aimerai que lorsque je rentre 2 entiers dans chacuns d'entre eux, le produit des 2 apparaissent dans un 3ème input.
    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
            <table> 
              <tbody>
                <tr>
                  <td><input type="text" class="form-control article_unite"></td>
                  <td><input type="text" class="form-control article_quantite"></td>
                  <td><input type="text" class="form-control article_total"></td>
                </tr>
              </tbody>
            </table>
     
    <script>
    $(function(){
            $('#table_article').on('change', '.article_pu', function(){
        var first = $(this).val();
        var second = $(this).parent().next().find('.article_quantite');
        var result = $(this).parent().next().find('.article_total');
     
        first.addEventListener("input", sum);
        second.addEventListener("input", sum);
     
        function sum() {
          
        var one = parseFloat(first.value) || 0;
        var two = parseFloat(second.value) || 0;
          
        var add = one+two;
     
        result.getElementByClassName('article_total').value = add;
        }
     
      });
    });
    </script>
    Difficulté 1 : J'ai l'erreur suivante dans ma console :
    TypeError: first.addEventListener is not a function
    Difficulté 2: j'ai créé un bouton qui me créé une nouvelle ligne de tableau à chaque fois. Donc j'ai besoin de viser la bonne ligne pour avoir le bon total qui lui corresponds.
    Peut-être faut-il que j'utilise quelque chose comme ceci?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
        var article_refarticle = $(this).parent().next().find('.article_refarticle');
    Merci!

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     var first = $(this).val();
    donc un string ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Janvier 2018
    Messages
    300
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : Janvier 2018
    Messages : 300
    Par défaut
    Autant pour moi, mais le pb persiste :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    var first = $(this).parent().next().find('.article_unite');

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Ton code est truffé d'erreurs :
    • de syntaxe
    • de logique
    • de mélange (jQuery + JS pur)
    • d'inattention

    A revoir de A jusqu'à Z.

  5. #5
    Membre éclairé
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Janvier 2018
    Messages
    300
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : Janvier 2018
    Messages : 300
    Par défaut
    Merci pour ta réponse.
    J'ai tenté de corriger quelques incohérences, peux-tu m'aider à partir de ce code ? merci

    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
            <table> 
              <tbody>
                <tr>
                  <td><input type="text" class="form-control article_unite"></td>
                  <td><input type="text" class="form-control article_quantite"></td>
                  <td><input type="text" class="form-control article_total"></td>
                </tr>
              </tbody>
            </table>
     
    <script>
    $(function(){
            $('#table_article').on('change', '.article_pu', function(){
        var first = getElementsByClassName(('article_unite');
        var second = getElementsByClassName(('article_quantite');
        var result = $(this).parent().next().find('.article_total');
     
        first.addEventListener("input", sum);
        second.addEventListener("input", sum);
     
        function sum() {
          
        var one = parseFloat(first.value) || 0;
        var two = parseFloat(second.value) || 0;
          
        var add = one+two;
     
        result.getElementByClassName('article_total').value = add;
        }
     
      });
    });
    </script>

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Déjà, on ne voit aucun élément de classe "article_pu".

    Ensuite, mets des console.log, pour voir si tu récupères les bonnes valeurs.

    Et ajoute "use strict";au début du script JS.

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

Discussions similaires

  1. [XSLT] Calcul entre deux noeuds, résultat dans un autre noeud
    Par thefutureisnow dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 06/12/2009, 15h55
  2. Réponses: 7
    Dernier message: 02/03/2009, 11h10
  3. Concatener et afficher le résultat dans une autre feuille ?!
    Par pat212008 dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 24/11/2008, 11h56
  4. Réponses: 1
    Dernier message: 20/08/2007, 10h25
  5. Réponses: 2
    Dernier message: 11/06/2007, 16h40

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