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 des valeurs d'un input généré dynamiquement


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 51
    Points : 23
    Points
    23
    Par défaut récupération des valeurs d'un input généré dynamiquement
    Bonjour à tous,
    J'ai un problème avec un code JavaScript et j'espère trouver la solution ici.
    J'explique un peu ce que je veux faire:
    Je veux générer automatiquement un formulaire. en fait je recupère les ligne d'une table par SELECT puis j'affiche toute les ligne et je créer en même temps un champ de type input pour chaque ligne. Je stock aussi le nombre de lignes de ma requète dans une variable que j'ai appelé $nbre_elt
    Ensuite je voudrais faire des calcul avec les valeurs qui seront saisies dans ces champs. Mon problème c'est la récupération de ces valeurs avec JavaScript pour les calcul.

    Voici mon code php :
    Code php : 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
     
    $sql = mysql_query("SELECT * FROM element_salaire,revenu_employe");
     
    $nbre_elt = mysql_num_rows($sql);
     
    $i=0;
     
    	while ($i<$nbre_elt && $result = mysql_fetch_array($sql) )
    	{
    		echo '<tr>'; 
    		echo '<td colspan="2">'.$result['nom_element'].'</td>';
    		echo '<td colspan="2"><input  type ="text" name ="montant_'.$i.'" ></td>';
    		echo '</tr>';
    		echo '<input value="'.$nbre_elt.'" type="hidden" name="nbre_elt" >';
    		$i++;
    	}
    jusqu'ici tout va bien

    voici le code JavaScript qui me pose problème:

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     
    somme = 0;
    for (i =0; i<nbre_elt; i++)
    	{   
    		champ = 'montant_'+[i];
     
    		valeur = document.formul.champ.value;
     
    		somme = parseInt(somme)+parseInt(valeur);
     
    // formul est le nom de mon formulaire		
     
    	}

    Mon problème c'est que je reçoit l'erreur suivante: document.formul.champ is undefined

    Quelle erreur ai-je commise dans mon code? MERCI pour votre reponse.

  2. #2
    Expert confirmé
    Avatar de Loceka
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    2 276
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2004
    Messages : 2 276
    Points : 4 845
    Points
    4 845
    Par défaut
    Tu ne peux pas accéder comme tu le fais, c'est à dire en passant par les propriétés javascript.

    Quand tu écris "document.formul.champ.value" il va chercher l'input avec le name "champ" car ta variable "champ" n'a pas d'incidence sur cette notation-là.

    Le plus simple à mon avis est de tout faire en dom :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var valeur = document.getElementsByName(champ)[0].value;

  3. #3
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 51
    Points : 23
    Points
    23
    Par défaut
    En effet, marche. merci beaucoup.
    Mais j'aimerai comprendre un peu le [0] que tu asmis après le champ.
    Par ailleurs j'ai ajouté return somme; au code mais quand je fais alert(somme) rien ne se passe et je n'ai pas de message d'erreur non plus

    Voicile nouveau code js:
    Code js : 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
     
    function calcul()
    {
    somme = 0;
     
    for (i =0; i<nbre_elt; i++)
    	{   
    		champ = 'montant_'+[i];
     
    		valeur = document.getElementsByName(champ)[0].value;
     
    		somme = parseInt(somme)+parseInt(valeur);
     
                   return somme;	
     
    	}
     
    alert(somme);
     
    }

  4. #4
    Expert confirmé
    Avatar de Loceka
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    2 276
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2004
    Messages : 2 276
    Points : 4 845
    Points
    4 845
    Par défaut
    La fonction getElementsByName() retourne une liste d'éléments (tous ceux qui on pour name la chaîne passée en argument). Dans ton cas le name est unique donc le [0] récupère le premier et unique élément.

    Sinon tu fais ton alert() après le return donc tu ne peux pas l'atteindre. D'ailleurs faire ton return dans la boucle for est une très mauvaise idée car ta boucle ne terminera pas : il ne sera fait qu'une seule itération.

  5. #5
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 51
    Points : 23
    Points
    23
    Par défaut
    Merci pour les explications.
    J'ai pris en compte tes remarques (j'ai mis le return en dehors de le boucle for et ca marche bien.
    Encore Merci

Discussions similaires

  1. Récupération des valeurs d'INPUTs créés dynamiquement ?
    Par Zebulon777 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 18/09/2014, 11h07
  2. Récuperer la valeur d'input généré dynamiquement
    Par pivalone dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 26/06/2007, 14h45
  3. Réponses: 4
    Dernier message: 20/03/2007, 19h28
  4. Réponses: 5
    Dernier message: 03/05/2006, 10h27
  5. Réponses: 2
    Dernier message: 10/05/2005, 15h54

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