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 de champs dans un formulaire !


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    ?
    Inscrit en
    Décembre 2016
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : ?
    Secteur : Service public

    Informations forums :
    Inscription : Décembre 2016
    Messages : 68
    Points : 48
    Points
    48
    Par défaut Ajout de champs dans un formulaire !
    Bonjour,
    Je suis sur qu'il y a une réponse à ma question sur le forum, mais j'ai beau essayé plein de code je n'arrive pas à trouver de solutions pour le mien...
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    </div>
    <div id="addInput">
    </div>
    <input id="btn+" type="button" class="btn btn-default"  value="Ajouter un Membre de famille" onClick="addField();" />
    voici mon code html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
    function addField() {
        var input = addInput.innerHTML
        addInput.innerHTML = input + '<hr><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberName"><?php echo JText::_('MEMBERNAME'); ?></label><div class="controls"><input type="text" name="Membername[]" /></div></div><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberBirthday"><?php echo JText::_('MEMBERBIRTHDAY'); ?></label><div class="controls"><input type="text" name="Memberbirthday[]" /></div></div><br />\n';
    }
    </script>
    et mon code javascript.
    Les habitués remarquerons qu'à chaque fois que j'ajoute un membre tous les champs sont effacés. Quelle serait la solution pour les conserver ?
    Merci pour votre aide

  2. #2
    Membre averti Avatar de Freudd
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2014
    Messages
    164
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2014
    Messages : 164
    Points : 377
    Points
    377
    Par défaut
    Bonjour Slushgood,

    Peux-tu en plus d'avoir partager ton code :
    - expliquer ce qu'il est censé faire (ton besoin),
    - ce qu'il se passe avec celui-ci (ton problème).

    Pense à bien présenter ces 2 points à chacun de tes sujets sur le forum, car là en première lecture nous ne savons pas ce que tu cherches à faire.

    Merci
    Mon projet CMS https://soosyze.com/
    Son repo github https://github.com/soosyze/soosyze

    Open source tools and free yes, but with elegance .

  3. #3
    Membre expert
    Avatar de Dendrite
    Femme Profil pro
    Développeuse informatique
    Inscrit en
    Juin 2008
    Messages
    2 129
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 58
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeuse informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juin 2008
    Messages : 2 129
    Points : 3 627
    Points
    3 627
    Billets dans le blog
    8
    Par défaut
    Bonjour

    De ce que je comprends,

    A chaque clic sur l'input #id 'btn+', tu lances la fonction js 'addField();'

    Cette fonction concatène alors le contenu de la div #id 'addInput' entre autres une div classe '.controls' qui contient un input sans 'value'

    Je ne suis sûre de rien, mais dans fonction addField(), essaie de remplacer ta ligne 4 par

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
     addInput.innerHTML = input + '<hr><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberName"></label><div class="controls"><input type="text" name="Membername[]" value="<?php echo JText::_('MEMBERNAME'); ?>"/></div></div><div class="control-group" style="margin-left:20px"><label class="control-label" for="inputMemberBirthday"></label><div class="controls"><input type="text" name="Memberbirthday[]" value="<?php echo JText::_('MEMBERBIRTHDAY'); ?>"/></div></div><br />\n';
    PDO, une soupe et au lit !
    Partir de la fin est un bon moyen de retrouver son chemin. Bibi - 2020

  4. #4
    Membre du Club
    Homme Profil pro
    ?
    Inscrit en
    Décembre 2016
    Messages
    68
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : ?
    Secteur : Service public

    Informations forums :
    Inscription : Décembre 2016
    Messages : 68
    Points : 48
    Points
    48
    Par défaut Je viens de trouver ma solution !
    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
    34
    35
    36
    37
    38
    39
    40
    41
    <script type="text/javascript">
     
    var counter = 0;
     
    function moreFields() {
            counter++;
            var newFields = document.getElementById('readroot').cloneNode(true);
            newFields.id = '';
            newFields.style.display = 'block';
            var newField = newFields.childNodes;
            for (var i=0;i<newField.length;i++) {
                    var theName = newField[i].name
                    if (theName)
                            newField[i].name = theName + counter;
            }
            var insertHere = document.getElementById('writeroot');
            insertHere.parentNode.insertBefore(newFields,insertHere);
    }
     
     
    </script>
    <!-- DIV de création nouveau membre  -->
    <div id="readroot"  style="display: none" >
    	<a href=""></a><i class="icon icon-arrow-down"></i><input type="button" value="Supprimer le membre" class="btn btn-default"
    		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></a>
    		<br /><br />
     
    <div class="control-group">
    	<label class="control-label" for="inputMembername"><?php echo JText::_('MEMBERNAME'); ?></label>
    	<div class="controls">
    		<input type="text" name="Membername[]" id="inputmembername" placeholder="Nom et prénom si différent...">
    	</div>
    </div>
    <div class="control-group">
    	<label class="control-label" for="inputMemberBirthday"><?php echo JText::_('MEMBERBIRTHDAY'); ?></label>
    	<div class="controls">
    		<input type="text" name="Memberbirthday[]" id="inputmemberbirthday" ></input>
    	</div>
    </div>					
    </div><span id="writeroot"></span>
    		<input id="btn+" type="button" class="btn btn-default"  value="Ajouter un Membre de famille" onClick="moreFields();" />
    Merci pour votre aide

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

Discussions similaires

  1. Ajouter un champs dans un formulaire
    Par marry dans le forum Langage
    Réponses: 5
    Dernier message: 02/10/2009, 17h13
  2. Ajouter des champs dans un formulaire
    Par king10481 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 24/04/2008, 09h15
  3. Ajouter des champs dans un formulaire.
    Par Invité dans le forum ASP.NET
    Réponses: 19
    Dernier message: 08/11/2007, 10h20
  4. Ajouter un champ dans un formulaire (classique)
    Par psgman113 dans le forum Langage
    Réponses: 9
    Dernier message: 14/05/2007, 17h21
  5. Ajouter des champs dans un formulaire
    Par Luffy Duck dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/05/2006, 10h30

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