bonjour,
j'avais besoin d'un formulaire dynamique où l'on pouvait ajouter ou suppirmer une zone de saisie en cliquant sur le bouton adéquat.
Etant très mauvais en javascript, j'ai adapté un code faisant à peu près la même chose à mon site.
Je me rend compte maintenant que je doit ajouter un autre element dans se formulaire, lui aussi interactif. J'ai essayé d'écrire le code mais je n'y arrive pas. Je demande donc votre aide.
tout d'abord voici le code (xhtml et js) que j'utilise pour l'instant.
xhtml
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1">
<option value="normal">normal</option>
<option value="externe">lien vers un autre site</option>
<option value="index">lien vers la page d'accueil</option>
</select>
<label> nom :<input type="text" name="nom_1" /></label>
<input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
<br />
</p>
javascript (je vous conseil de sauter ce code et d'y revenir si vous décidé de vous attaquer à mon probleme)
function supprimlien(event)
{
//on sélectionne le bloc formulaire et on récupère tous les label qu'il y a à l'intérieur
var bloc_liens = document.getElementById("lesLiens");
var labels = bloc_liens.getElementsByTagName("label");
//On récupère le noeud qui emmet l'évènement et sa position grâce au texte Valeur x
var node_source = (document.all)?event.srcElement:event.target;
var attribut = node_source.previousSibling.lastChild.getAttribute("name");
var position = attribut.split("_")[1];
//On décalle d'un cran inférieur tous les éléments situé après l'élément à supprimer
for(var i=position;i<labels.length;i++)
{
var label = labels[i];
var input = label.getElementsByTagName("input")[0];
var liste = label.previousSibling;
input.setAttribute("name","nomDuLien_"+i);
liste.setAttribute("name","typeDeLien_"+i);
}
//Suppression de la zone de texte, du lien et du saut de ligne
var label = labels[position-1];
var liste = label.previousSibling;
var texteliste = liste.previousSibling;
var boutton = label.nextSibling;
var br = boutton.nextSibling;
bloc_liens.removeChild(label);
bloc_liens.removeChild(boutton);
bloc_liens.removeChild(br);
bloc_liens.removeChild(liste);
bloc_liens.removeChild(texteliste);
}
function nouveaulien()
{
//On compte le nombre de label dans le fieldset "lesLiens"
var bloc_liens = document.getElementById("lesLiens");
var numero = bloc_liens.getElementsByTagName("label").length;
numero ++;
//création de la nouvelle ligne de formulaire
//0)SELECT
var liste = document.createElement("select");
liste.setAttribute("name","typeDeLien_"+numero);
var texteliste = document.createTextNode("Type de lien: ");
//option 1
var option1 = document.createElement("option");
option1.setAttribute("value","normal");
var texteoption1 = document.createTextNode("normal");
option1.appendChild(texteoption1);
//option 2
var option2 = document.createElement("option");
option2.setAttribute("value","externe");
var texteoption2 = document.createTextNode("lien vers un autre site");
option2.appendChild(texteoption2);
//option 3
var option3 = document.createElement("option");
option3.setAttribute("value","index");
var texteoption3 = document.createTextNode("lien vers la page d'accueil");
option3.appendChild(texteoption3);
//assemblage liste
liste.appendChild(option1);
liste.appendChild(option2);
liste.appendChild(option3);//
//1) LABEL
var label = document.createElement("label");
var valeurLabel = document.createTextNode(" nom du lien: ");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","nomDuLien_"+numero);
label.appendChild(valeurLabel);
label.appendChild(input);
//2) BOUTTONS (supprimer et ajouter)
var bouttonSupprim = document.createElement("input");
bouttonSupprim.setAttribute("type","button");
bouttonSupprim.setAttribute("value","supprimer le lien");
if(document.all) bouttonSupprim.attachEvent("onmouseup",supprimlien);
else bouttonSupprim.addEventListener("mouseup",supprimlien,true);
//3) <BR />
var br = document.createElement("br");
//4) mise en forme
bloc_liens.appendChild(texteliste);
bloc_liens.appendChild(liste);
bloc_liens.appendChild(label);
bloc_liens.appendChild(bouttonSupprim);
bloc_liens.appendChild(br);
}
ce code fonctionne et pour que vous puissiez y voir plus clair voici une page ou se trouve ce petit formulaire:
iciJ'aimerais que lorsque l'on selectionne sur la deuxieme option de la liste deroulante, une nouvelle zone de saisie apparaisse entre la liste deroulante et la premiere zone de saisie.
ce qui donnerais ce code:
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1">
<option value="normal">normal</option>
<option value="externe">lien vers un autre site</option>
<option value="index">lien vers la page d'accueil</option>
</select>
<label> url :<input type="text" name="url_1" /></label>
<label> nom :<input type="text" name="nom_1" /></label>
<input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
<br />
</p>idéalement, losrque l'on enleverais le focus à la 2eme option , cette zone de saisie disparaitrais, mais ceci est facultatif.
le probleme est qu'il faut que cela fonctionne quelque soit le nombre de ligne qu'il y ait.
je pense avoir tout dit.
Je sais que je demande beaucoup mais si quelqu'un acceptait d'ecrire ce code je lui en serais très reconnaissant.
merci d'avance.
conseil: si vous décider de vous attaquer à ce probleme, vous aurez sans doute besoin de travailler sur le code que j'ai donné plus haut (a moin que vous decidiez de tout reécrire mais je ne pense pas que ce soit utile). pour faciliter la lecture de ce code je vous conseil d'en faire un copier coller dans votre editeur de texte preferé.