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 :

ajout d'un champs input text dans un formulaire


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Février 2003
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Février 2003
    Messages : 24
    Points : 17
    Points
    17
    Par défaut ajout d'un champs input text dans un formulaire
    Bonjour,
    voila j'explique mon soucis, j'ai fais un formulaire dans lequel on choisit le nombre d'enfants avec un select. suite à ce choix dans ce select je voudrai faire apparaitre autant de champs input text que d'enfants afin de remplir leur âge.

    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form name="form" ...>
    <select name="NombreDEnfants" OnChange="AgeEnfants&#40;this.id&#41;">
    <option value=0>0</option>
    <option value=1>1</option>
    ...
    <option value=5>5</option>
    </select>
    <div id="age">/div>
    </form>
    Javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function AgeEnfants&#40;elem&#41;
    &#123;
            var age ='';
    	var NbEnfants = document.getElementById&#40;elem&#41;.selectedIndex;
    	for &#40;var i=0; i<NbEnfants; i++&#41;
    		age +='<input type="text" name="age' + i +'" size="2" maxlength="2">';
    	document.getElmentById&#40;'age'&#41;.innerHTML = age;
    &#125;
    J'arrive à récupérer le nombre d'enfants sélectionné avec le selectedIndex mais j'arrive pas à créer les champs de type text avec le innerHTML.

    étant pas très à l'aise avec le Javascript j'attend vos conseils pour savoir s'y je m'y prend comme il faut pour réaliser ça et pour comprendre pourquoi ce que j'ai fait marche pas.
    Merci.
    Catch the mouse...

  2. #2
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    bonjour,


    Pour le select, récupère la valeur plutôt que l'index qui ne correspond pas forcément au nombre d'enfants (ou à la valeur).
    et une faute de frappe à getElementById (manque un e).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    function AgeEnfants&#40;elem&#41;
    &#123;
            var age ='';
       var NbEnfants = document.getElementById&#40;elem&#41;.value;
       for &#40;var i=0; i<NbEnfants; i++&#41;
          age +='<input type="text" name="age' + i +'" size="2" maxlength="2">';
       document.getElementById&#40;'age'&#41;.innerHTML = age;
    &#125;

    et le code HTML. Remplace name par id (c'est un d'ailleurs un id que tu transmets comme paramètre) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select id="NombreDEnfants" OnChange="AgeEnfants&#40;this.id&#41;">

  3. #3
    Membre à l'essai
    Inscrit en
    Février 2003
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Février 2003
    Messages : 24
    Points : 17
    Points
    17
    Par défaut
    C'est Ok c'était la faute de frappe sur le getElementById...
    je devrai me relire plus attentivement c très con

    j'avai oublié de réécrire id dans le post mais j'utilise bien l'id...
    quant aux index, dans mon cas il correspondent aux ages mais je vais tout de même changer ma fonction et récupérer les valeurs

    Merci bocou...
    Catch the mouse...

  4. #4
    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
    attention les browser n'apprécient pas vraiment la modification des forms par le innerHTML ...
    l'input risque de ne pas être pris en compte dans le submit ...

    mieux vaut passer par des createElement ...
    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 !

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

Discussions similaires

  1. xajax et le champ input text dans le formulaire
    Par nizar24 dans le forum Bibliothèques et frameworks
    Réponses: 0
    Dernier message: 11/09/2012, 12h29
  2. Ajout d'un champ de texte dans la barre d'outils d'Eclipse
    Par stef122 dans le forum Eclipse Platform
    Réponses: 2
    Dernier message: 23/07/2010, 13h10
  3. Réponses: 2
    Dernier message: 16/07/2009, 16h14
  4. [Doctrine] Ajout d'un champ texte dans un formulaire crée par Doctrine
    Par Malonix dans le forum PHP & Base de données
    Réponses: 0
    Dernier message: 30/03/2009, 12h53
  5. Detecter la saisie dans un champ input text
    Par suckthewindow dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 21/08/2008, 12h52

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