Discussion :

[MInfo25]

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

[Kennel sébastien]

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;

[Beginner.]

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

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"...

[MInfo25]

Merci ça marche !