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érer les valeurs d'input en tableau pour faire des calculs


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Responsable RH
    Inscrit en
    Février 2020
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Responsable RH
    Secteur : Service public

    Informations forums :
    Inscription : Février 2020
    Messages : 5
    Points : 3
    Points
    3
    Par défaut Récupérer les valeurs d'input en tableau pour faire des calculs
    Bonjour,
    nouveau sur le forum. Ex guru Powerbuilder et SQL, je développe maintenant bcp en php mais assez peu en JS.
    Mon problème est assez simple.
    Soit, dans un form une série de 3 inputs du genre (bien sûr dans la réalité, il y a n lignes et tout est généré par php).
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <input type="text" name="montant[]" onchange="Recalcul(1)">
    <input type="text" name="montant[]" onchange="Recalcul(2)">
    <input type="text" name="montant[]" onchange="Recalcul(3)">

    Sachant, par exemple que la somme des n montants saisis doit toujours faire 1000 (exemple simplifié aussi),
    Comment, dans la fonction JS Recalcul(), puis-je récupérer les valeurs des 2 premiers éléments du tableau, puis affecter la différence à 1000 dans le dernier élément ?
    Autant, quand on utilise des inputs uniques, faire ça est trivial avec nom_input.value, à la fois pour récupérer comme pour affecter des valeurs, autant ça semble se compliquer terriblement dès qu'on travaille en tableau d'input...
    Toutes mes recherches sur le net aboutissent à des solutions qui me paraissent bien complexes. Je précise que je ne souhaite pas mettre en oeuvre une quelconque librairie ni de Jquery ou autre. Uniquement du JS standard.

    Help ? 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 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    getElementsByName() te retournera la collection des inputs ...
    il te suffira de boucler dessus soit pour basculer dans un array ou faire tes calculs directement ...
    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
    Candidat au Club
    Homme Profil pro
    Responsable RH
    Inscrit en
    Février 2020
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Responsable RH
    Secteur : Service public

    Informations forums :
    Inscription : Février 2020
    Messages : 5
    Points : 3
    Points
    3
    Par défaut c'est bien ce que j'ai essayé
    Merci pour cette réponse.
    C'est ce que j'ai essayé, bien sûr, mais je n'y suis pas parvenu. Un petit exemple serait le bienvenu.
    je fais un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var allEls=window.document.form1.getElementsByName("montant[]");
    et le débogueur me dit que l'objet ne gère pas la méthode getElementsByName.
    j'ai bien sûr essayé sans spécifier les crochets.

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    petit indice:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const inp=document.forms[0]['montant[]']

  5. #5
    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 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var allEls=document.getElementsByName("montant[]");
    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 !

  6. #6
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    Voici un contrôle pour des entiers positifs (très simplifié, comme tu dis);

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <form>
    	<input type="number" name="montant[]">
    	<input type="number" name="montant[]">
    	<input type="text" readonly name="montant[]">
    </form>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const inp=document.forms[0]['montant[]']
    inp.forEach((v,i,t)=>{
    	v.addEventListener("change",(e)=>{
    		if(Number(t[0].value)>0 && Number(t[1].value)>0 
    		&& Number(t[0].value)+Number(t[1].value)<1000){
    			t[2].value=1000 - t[0].value - t[1].value
    		}
                    else{
    			t[2].value="erreur de saisie"
    		}
    	})
    })

  7. #7
    Candidat au Club
    Homme Profil pro
    Responsable RH
    Inscrit en
    Février 2020
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Responsable RH
    Secteur : Service public

    Informations forums :
    Inscription : Février 2020
    Messages : 5
    Points : 3
    Points
    3
    Par défaut en effet...
    Citation Envoyé par SpaceFrog Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var allEls=document.getElementsByName("montant[]");
    Merci javatwister et Spacefrog !
    en effet, juste après avoir posté ma réponse, je me suis aperçu que le getElementsByName() ne s'appliquait pas form1 mais à document.
    Je ne suis pas très à l'aise avec la hiérarchie des objets en JS (ça me gonflait déjà copieusement en VB...)
    Je récupère donc bien les valeurs maintenant (méthode Spacefrog).
    Il me reste juste à renvoyer le résultat du calcul dans le dernier input du tableau et là, j'avoue que je sèche.
    je tente un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    window.document.form1.montant[2].value = resultat;
    mais bien sûr, cela ne fonctionne pas...
    Sans passer par la méthode de Javatwister, peut-on affecter directement le résultat au dernier input ?

  8. #8
    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 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    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 !

  9. #9
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    Euh... t'as essayé mon code ou bien?

  10. #10
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221

  11. #11
    Candidat au Club
    Homme Profil pro
    Responsable RH
    Inscrit en
    Février 2020
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Responsable RH
    Secteur : Service public

    Informations forums :
    Inscription : Février 2020
    Messages : 5
    Points : 3
    Points
    3
    Par défaut suite
    Citation Envoyé par javatwister Voir le message
    Euh... t'as essayé mon code ou bien?
    à Javatwister : j'ai essayé le code de Spacefrog à base de getelementsbyname(), même si je ne doute pas un seul instant que ton code fonctionne.

    à Spacefrog : j'ai vu ton code sur jsfiddle . On est pas loin mais ce que je veux faire, c'est adresser directement la value de montant[2] (dans l'exemple simpliste).
    C'est dans le cadre de la saisie d'un budget prévisionnel sur plusieurs années. Il y a une somme à ne pas dépasser (connue par ailleurs dans un input hidden) et à chaque modification d'un montant, je veux que le reliquat s'affiche par défaut dans le budget de la dernière année (y compris en négatif si on a tapé trop haut !).
    C'est pourquoi je souhaite alimenter directement montant[imax].value (si c'est possible), et non pas un résultat en dehors du tableau.

    Mais merci encore à tous les deux. J'en apprends beaucoup grâce à vous.

  12. #12
    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 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Dans le dernier des names...

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form>
    	<input type="number" name="montant[]">
    	<input type="number" name="montant[]">
    	<input type="number" name="montant[]">
      <input type="number" name="montant[]" readonly >
      <input type="button"  id="go" value="calcul" />
     </form>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function addUp(){
    elts=document.getElementsByName('montant[]');
    total=0;
    il=elts.length
    for ( i=0; i<il-1; i++) {
    total += +elts[i].value;
    }
    elts[i].value=total
    }
    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 !

  13. #13
    Candidat au Club
    Homme Profil pro
    Responsable RH
    Inscrit en
    Février 2020
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Responsable RH
    Secteur : Service public

    Informations forums :
    Inscription : Février 2020
    Messages : 5
    Points : 3
    Points
    3
    Par défaut Merci !
    Un grand merci. ça fonctionne une fois adapté à mon exemple et j'en suis très étonné car pour moi, dans ton code, elts était une variable de portée locale à la fonction addUp() et je n'imaginais pas qu'en adressant sa value, ça allait rétroagir sur montant[] ! En fait, je comprends maintenant que c'est un pointeur vers montant[], ce qui change tout !!
    Cela signifie donc qu'en instanciant elts, on crée une référence à montant[].
    me coucherai moins bête ce soir...
    Merci aussi à Javatwister. Je garde ton code en mémoire pour quand je serai un peu moins newbie en JS.

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

Discussions similaires

  1. Récupérer les valeurs d'un autre tableau
    Par counterbob dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 28/11/2018, 13h40
  2. [Toutes versions] Récupérer simplement les valeurs d'une zone de liste
    Par nadgreg dans le forum Access
    Réponses: 8
    Dernier message: 15/04/2014, 10h54
  3. [Débutant] [uitable] Récupérer toutes les valeurs d'un tableau et les comparer à un fichier
    Par nawal59 dans le forum Interfaces Graphiques
    Réponses: 10
    Dernier message: 18/10/2010, 17h57
  4. [MySQL] Requête pour récupérer toutes les valeurs d'un tableau
    Par djoumusic dans le forum PHP & Base de données
    Réponses: 40
    Dernier message: 24/08/2008, 23h11
  5. Réponses: 1
    Dernier message: 26/02/2008, 12h51

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