Afficher automatiquement la somme d'inputs

Afficher automatiquement la somme d'inputs - Javascript/Node.js - Programmation

Marsh Posté le 28-10-2017 à 16:12:56    

Bonjour,
 
J'ai dans une page plusieurs formulaires semblables.
Chacun d'eux est constitué d'une série d'inputs dont le nombre est variable (dépendant d'une base de données mysql).
Les valeurs de ces inputs sont donc traitées comme un tableau.
 

Citation :

<input type="text" name="valeurs[]"  id="valeur_1" />
<input type="text" name="valeurs[]"  id="valeur_2" />
<input type="text" name="valeurs[]"  id="valeur_3" />
...


 
J'aimerais, pour chacun des formulaires présents sur la page, afficher la somme des valeurs contenues dans les inputs, et mettre à jour cette somme en cas de modification.
 
Je butte sur deux choses:

  • Comment gérer le nombre variable de valeurs?
  • Comment identifier le formulaire où la modification a été faite, sans affecter les autres ?


Etant débutant et souhaitant garder le site simple et robuste, j'ai tendance à éviter de solutions peut-être plus complexes comme jquery, est-ce possible ?
 
Merci beaucoup

Reply

Marsh Posté le 28-10-2017 à 16:12:56   

Reply

Marsh Posté le 28-10-2017 à 17:59:52    

J'ai avancé, mais ça ne marche encore que pour le premier formulaire de la page, sans que je ne sache encore pourquoi.

 

J'affiche la valeur calculée dans le champs "somme" du formulaire où une modification à été faite.

 

Au niveau de mes inputs valeurs[] :

 
Citation :

onblur="somme_valeurs(this)"

 

Et la fonction correspondante:

 
Citation :

 <script type="text/javascript">
    function somme_valeurs(x){
        var arr = document.getElementById(x.form.id).elements['valeurs[]'];
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }
        document.getElementById(x.form.id).elements['somme'].value = tot;
    }
    </script>



Message édité par petite fraise le 28-10-2017 à 18:46:03
Reply

Marsh Posté le 28-10-2017 à 19:44:43    

Voici quelque chose qui marche :

Citation :


    function somme_valeurs(x){
        var formId = x.form.id;
        var arr = document.querySelectorAll('#' + formId + ' [name="valeurs[]"]');

 

       var tot=0;
        for(var i=0;i<arr.length;i++)
        {
            if(parseInt(arr[i].value))
                tot += parseInt(arr[i].value);
        }

 

       document.querySelector('#' + formId + ' [name="somme"]').value = tot;       
    }

 

N'hésitez pas à faire des remarques

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed