Tom's Guide > Forum > Programmation > [javascript]Créer un formulaire dynamique

[javascript]Créer un formulaire dynamique

Forum Programmation : [javascript]Créer un formulaire dynamique

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

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

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> nom :<input type="text" name="nom_1" /></label>
<input type="button" value="ajouter une zone de saisie" onClick="javascript:nouveau()" />
</p>

javascript: le code est assez gros donc je le mets à disposition sur cette page: http://www.twallet.be/test/code
ce code fonctionne et pour que vous puissiez y voir plus clair voici une page ou se trouve ce petit formulaire: http://www.twallet.be/test/test
J'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:

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()" />
</p>

[/size]
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é.

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Salut bon je t ais fait un truc à l arrache pour te donner une idée du fonctionnement de quelques fonctions voila la fin de ta page test.htm

au faite il manquais les extensions sur tes liens heureusement que ton répertoire n est pas protégé contre le listage

et la prochaine fois mais des liens avec le bouton url!!!!

Code :

function ShowUrlField()
{
if(document.formulaire.typeDeLien_1.value == "externe" )
{
document.formulaire.url_1.style.visibility = "visible";
}
else
document.formulaire.url_1.style.visibility = "hidden";
}
</script>
</head>
<body onload="ShowUrlField()">
<form action="#" method="post" name="formulaire">
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1" onChange="ShowUrlField()">
<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 du lien: <input type="text" style="visibility:visible" name="url_1" /></label>
<label> nom du lien: <input type="text" name="nomDuLien_1" /></label> <input type="button" value="ajouter un lien" onClick="javascript:nouveaulien()" />
</p>
</form>
</body>
</html>

Répondre à showie

merci de ta réponse mais il y a 2 probleme:
-seule la zone de saisie disparait, pas le texte "url: "
j'ai essayé de déplacé les attributs style="visibility:visible" et name="url_1" sur le label
mais ca ne fonctionne pas.
-même caché, la zone prend tout de même de la place sur l'ecran. Mais ce n'est qu'un détail.

j'ai ressu sur un autre forum une fonction similaire utilisant "display:none"(testez la ici)qui semble plus approrié. le probleme avec cette fonction se trouve lorsque je veu ajouter une nouvelle ligne de formulaire dynamiquement:
commemt attacher la fonction onchange="declic(this,document.getElementById('adresse'))"
à la balise "select"?

j'imagine qu'il serait possible de faire un mixe des deux fonction.
au cas ou, voici celle dont je parlait:

Code :

<select name="typeDeLien_1" onchange="declic(this,document.getElementById
('adresse'))">
<option value="un">un</option>
<option value="externe">deux</option>
<option>trois</option>
</select>
<p id="adresse" style="display:none">
<label> url : <input type="text" name="url_1" /></label>
</p>
<p>
<label> nom : <input type="text" name="nom_1" /></label>
</p>
</div>
</form>
<script type="text/javascript">
function declic(s,adr){
adr.style.display = s.value=="externe" ? "block" : "none";
}
</script>

Répondre à pomgnon

j'ai fini par réunir l'ajout dynamique de ligne et l'apparition/disparition de la zone de saisie comme ceci:

Code :

//voici la fonction appellée par le changement d'option dans la liste
function declic(num){
var adr = document.getElementById('adresse_'+num);
var liste = document.getElementById('typeDeLien_'+num);
adr.style.display = liste.value=="externe" ? "inline" : "none";
}
/*beaucoup plus loin,
au millieu de la fonction ajoutant une ligne au formulaire,
voici la creation de la zone de saisie qui doit pouvoir
disparraître et apparaître à volonté*/
var span = document.createElement("span" );
span.setAttribute("id","adresse_"+numero);
span.setAttribute("style","display:none" );
var valeurspan = document.createTextNode(" addresse de la page: " );
var input = document.createElement("input" );
input.setAttribute("type","text" );
input.setAttribute("name","url_"+numero);
span.appendChild(valeurspan);
span.appendChild(input);
//puis la création de la liste deroulante (je ne montre qu'une partie)
var liste = document.createElement("select" );
liste.setAttribute("name","typeDeLien_"+numero);
liste.setAttribute("id","typeDeLien_"+numero);
liste.setAttribute("onchange","declic("+numero+" )" );
//et enfin, le code html
<p id="lesLiens">
Type de lien: <select name="typeDeLien_1" id="typeDeLien_1" onchange="declic(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>
<span id="adresse_1" style="display:none">adresse du site : <input type="text" name="url_1" />
</span>
<label> nom du lien: <input type="text" name="nomDuLien_1" />
</label>
<input type="button" value="ajouter un lien" onClick="javascript:nouveaulien()" />
</p>

ce code fonctionne très bien sous firefox, mais sur IE
le bloc devant être invisible ne l'est pas.

Répondre à pomgnon

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > [javascript]Créer un formulaire dynamique

Aller à :

Aide |
Règles du forum

Il y a 1481 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,285 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens