1. #1
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 142
    Points : 46
    Points
    46

    Par défaut Insérer mon code javascript à un endroit précis de mon formulaire

    Bonjour
    J'aimerais ajouter le rendu html de mon code javascript dans un endroit précis de mon formulaire.
    Le problème que je rencontre est comment afficher le rendu en javascript dans un de mes fieldset html ?
    Voici un bout de mon formulaire html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form name="monFormulaire" method="post" action="traitement.php">
    <fieldset id="experiences">
    	<legend> Expériences professionnelles</legend>
    	<button onclick="ajout(this);">+ Ajouter une expérience</button>
        <script src="js/fonctions.js"></script> 
     
    	</fieldset>
    <input type="submit" name="envoyer" value="Envoyer"/>
         </form>


    Voici le javascript :
    Code : 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
    function ajout(element){
            var formulaire = window.document.monFormulaire;            
     
            var str = '<input type="button" onclick="ajout(this);" value="ajouter un champ"><input type="button" value="x"><p><input name="champs1[]" type="text" placeholder="Nom de l&apos;entreprise"></p><p><input name="champs2[]" type="text" placeholder="Fonction occupée"></p><p><input name="champs3[]" type="text" placeholder="Durée"></p><p><select name="champs4[]"><option value="" selected="selected">Principal enseignement...</option><option value="connaissance_metier">Connaissance du métier</option><option value="interet_metier">Intérêt pour le métier</option><option value="connaissance_secteur">Connaissance du secteur</option><option value="interet_secteur">Intérêt pour le secteur</option><option value="management">Management</option><option value="rigueur">Rigueur</option></select></p><p><input type="checkbox" id="cbox1" value="checkbox1"> Poste actuel</p>';        
            formulaire.innerHTML = str + formulaire.innerHTML;
     
          }
     
          function suppression(element){
            var formulaire = window.document.monFormulaire;
     
            // Supprime le bouton d'ajout
            formulaire.removeChild(element.previousSibling);
            // Supprime les 4 champs
            formulaire.removeChild(element.nextSibling);
            formulaire.removeChild(element.nextSibling);
            formulaire.removeChild(element.nextSibling);
            formulaire.removeChild(element.nextSibling);
    		formulaire.removeChild(element.nextSibling);
            // Supprime le bouton de suppression
            formulaire.removeChild(element);
          }
    J'aimerais que mon code javascript s'exécute dans le fieldset html.

    Comment faire svp ? Merci
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  2. #2
    Membre actif Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    septembre 2008
    Messages
    154
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : septembre 2008
    Messages : 154
    Points : 224
    Points
    224

    Par défaut

    Bonjour MInfo25

    Je ne te comprends pas trop ce que tu souhaites faire.

    Tu souhaites placer en fait le contenu de ta variable « str » dans le « <fieldset id="experiences"> » ?

    Dans ce cas tu as plutôt :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var str             = '<input type="button" onclick="ajout(this);" value="ajouter un champ"><input type="button" value="x"><p><input name="champs1[]" type="text" placeholder="Nom de l&apos;entreprise"></p><p><input name="champs2[]" type="text" placeholder="Fonction occupée"></p><p><input name="champs3[]" type="text" placeholder="Durée"></p><p><select name="champs4[]"><option value="" selected="selected">Principal enseignement...</option><option value="connaissance_metier">Connaissance du métier</option><option value="interet_metier">Intérêt pour le métier</option><option value="connaissance_secteur">Connaissance du secteur</option><option value="interet_secteur">Intérêt pour le secteur</option><option value="management">Management</option><option value="rigueur">Rigueur</option></select></p><p><input type="checkbox" id="cbox1" value="checkbox1"> Poste actuel</p>';        
    var champ           = document.getElementById('experiences');
        champ.innerHTML = str + champ.innerHTML;
    Vous cherchez à apprendre les bases en langage « C » ou « Go » ? N'hésitez pas à me contacter par MP.
    Vous souhaitez créer des tutoriels ? N'hésitez pas à me contacter par MP.

  3. #3
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    774
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 774
    Points : 875
    Points
    875

    Par défaut

    Ce fil est en rapport avec celui-ci : Ajouter des champs dynamiquement...

    Je me suis aperçu qu'il manquait une partie dans la string str, il manque ceci : onclick="suppression(this);" sinon la fonction "suppression" n'est pas lancée... Je l'ai ajoutée ci-après...

    Sinon si on veut que les champs soit ajoutés dans le <fieldset> il suffit de remplacer dans les deux fonctions (ajout() et suppresssion()) ceci : window.document.monFormulaire; par ce qu'a utilisé Kennel Sébastien à savoir : document.getElementById('experiences');...

    Vous pouvez testez ici : http://jsbin.com/kinegisuwu/edit?html,output


    Citation Envoyé par Kennel sébastien Voir le message
    Tu souhaites placer en fait le contenu de ta variable « str » dans le « <fieldset id="experiences"> » ?
    Oui c'est ça sauf qu'il faut que cela se fasse à chaque fois qu'on clique sur le bouton : "ajouter un champ"...

  4. #4
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 142
    Points : 46
    Points
    46

    Par défaut

    Merci ça marche !
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 19/04/2008, 16h34
  2. le htm bloque mon code javascript
    Par kaolivier dans le forum JavaScript
    Réponses: 4
    Dernier message: 12/12/2007, 09h20
  3. [W3C] Validation html d'un code javascript
    Par jlon25 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 16/08/2007, 09h37
  4. une faute dans mon code javascript.
    Par jack_1981 dans le forum JavaScript
    Réponses: 3
    Dernier message: 11/05/2006, 03h05
  5. Problème de paramètres dans mon code javascript
    Par cocacollection dans le forum JavaScript
    Réponses: 7
    Dernier message: 15/03/2006, 10h53

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