Tableau auto-extensible en utilisant modX

Salut tout le monde :)

J'utilise actuellement le CMS ModX. Ce qui va expliquer pourquoi mon code parait un peu "bizarre" 8-)

J'aimerais créer un petit tableau extensible à l'aide d'un clic sur un bouton. Ajouter une ligne à chaque clic quoi. Voilà le code, j'explique ensuite :

Code:

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
<input type="button" onclick="salarie.ajouterLigne();" value="Ajouter une ligne"/>
<TABLE BORDER="1" align="center" id="tableau"> 
    <CAPTION><strong>Formations suivies pour s'adapter à l'évolution du contenu du poste ou au changement de poste</strong></CAPTION> 
    <TR>
        <TH> Numero</TH> 
        <TH> Intitulé</TH> 
        <TH> Organisme</TH> 
        <TH> Date</TH> 
        <TH> Durée (heures)</TH> 
        <TH> Eval. à chaud / à froid</TH> 
        <TH> Dispositif utilisé (plan de formation, DIF, CPF, VAE ...)</TH> 
    </TR> 
    <TR> 
        <TD><p id="formation_numero">
            <input type="text" name="formation_numero" id="formation_numero" value="[+formation_numero+]"  required />
        </p></TD>
        <TD> <p id="formation_intitule">
            <input type="text" name="formation_intitule" id="formation_intitule" value="[+formation_intitule+]"  required />
        </p></TD> 
        <TD> <p id="formation_organisme">
            <input type="text" name="formation_organisme" id="formation_organisme" value="[+formation_organisme+]"  required /> 
        </p></TD> 
        <TD> <p id="formation_date">
            <input type="text" name="formation_date" id="formation_date" value="[+formation_date+]"  required /> 
        </p></TD>
        <TD> <p id="formation_duree">
            <input type="text" name="formation_duree" id="formation_duree" value="[+formation_duree+]" required /> 
        </p></TD>
        <TD> <p id="formation_evaluation">
            <textarea name="formation_evaluation" id="formation_evaluation" >[+formation_evaluation+]</textarea> 
        </p></TD> 
        <TD> <p id="formation_dispositif_utilise">
            <input type="text" name="formation_dispositif_utilise" id="formation_dispositif_utilise" value="[+formation_dispositif_utilise+]"  required /> 
        </p></TD> 
    </TR> 
</TABLE>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ajouterLigne: function() {
    var tableau = document.getElementById("tableau");
    var ligne = tableau.insertRow(-1);//on a ajouté une ligne
    var c, ch1;
	ch1=document.createElement('input');
	ch1.setAttribute('type','text');
	ch1.setAttribute('name','formation_numero');
	ch1.setAttribute('value', '[+formation_numero+]');
	ch1.setAttribute('id','formation_numero');
	ligne.appendChild(ch1);
    var colonne1 = ligne.insertCell(ligne.appendChild(ch1));//on a une ajouté une cellule
    var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
    var colonne3 = ligne.insertCell(2);
    var colonne4 = ligne.insertCell(3);
    var colonne5 = ligne.insertCell(4);
    var colonne6 = ligne.insertCell(5);
    var colonne7 = ligne.insertCell(6);
}

Vous pouvez donc voir que la première partie contient le tableau en lui-même. Et c'est dans la deuxième partie, conprenant le js, que j'ai un problème. En effet, avec modX, quand on remplis les values avec les placeholders ( '[+formation_numero+]' ceci quoi), l'input sera vide mais permettra ensuite un traitement de cette information. Je vous évite les détails, pour faire simple, ce placeholder me permet par la suite de récupérer la valeur qui sera affiché dans mon champ au travers d'une petite fonction. Ca ressemble à ceci :

Code:

1
2
3
4
5
6
valideEntretienPro: function() {
	var infosformulaire = [];
	// id fiche entretien
	infosformulaire.include({'formation_numero': $('formation_numero').value});
....
}

En gros, si j'ai "test" dans mon champ, formation_numero comprendra comme valeur "champ". Je pense que vous avez compris ... enfin du moins ça parait assez compréhensible ^^

Enfin du coup, mon problème est que lors du clic sur ajouter une ligne, bah j'ai '[+formation_numero+]' qui s'affiche dans mon champ. Et j'aimerais à la place que tous mes champs soit vides ...

Avez-vous une idée ? merci d'avance :)