Page 1 sur 1

ajout ligne dynamique à chaque clique sur un lien

Posté : 28 sept. 2008, 22:18
par hi-logik
Bonjour à toutes et à tous !

Voila j'ai fais un tableau et dans une ligne ce trouve des éléments de formulaire !

je voudrais que quand je clique sur un lien ajouter vienne ce rajouter une ligne identique !
je veux le faire qu'en php

je sais pas trop comment je dois m'y prendre :
du genre avec une boucle et j'y mettrai une condition pour incrementer une ligne à chaque click !

mais je sais pas trop par ou commencer !

merci pour votre aides !

Re: ajout ligne dynamique à chaque clique sur un lien

Posté : 28 sept. 2008, 22:46
par albat
je voudrais que quand je clique sur un lien ajouter vienne ce rajouter une ligne identique !
je veux le faire qu'en php
C'est de la gestion d'évènement côté client, donc... Javascript !
Ou alors, tu t'imposes un rechargement intégral de la page à chaque clic. Beurk ! :x

ajout ligne

Posté : 28 sept. 2008, 23:04
par hi-logik
merci !

mais cela ne veut il pas dire ajax ? parce que j'ai pas envie d'un truc lourd a mettre en place !

si c'est pas lourd à mettre en place pourrais tu me diriger stp si il existe un post ou tuto sur le sujet ?

j' ai conscience que c'est pas le mieux mais c'est pour un tous petit traitement et c'est en local car je le met pas en ligne !

Posté : 28 sept. 2008, 23:07
par jojolapine
ça ne doit pas être très commpliqué en javascript...
Tu rajoute ta ligne, en incrémentant une variable afin que tes noms de variables soient: nom1,nom2,nom3, etc...
Et dans ta page action, tu fait une boucle sur tes variables afin de savoir si elle sont oui ou non présente...
Qu'est-ce qui te parait difficile?

Re: ajout ligne

Posté : 29 sept. 2008, 01:34
par AB
merci !

mais cela ne veut il pas dire ajax ? parce que j'ai pas envie d'un truc lourd a mettre en place !

si c'est pas lourd à mettre en place pourrais tu me diriger stp si il existe un post ou tuto sur le sujet ?

j' ai conscience que c'est pas le mieux mais c'est pour un tous petit traitement et c'est en local car je le met pas en ligne !
Non javascript n'implique pas obligatoirement ajax (et ajax n'est pas obligatoirment lourd).

Un petit exemple d'ajout de lignes de téléchargement de fichiers. Comme tu peux le constater c'est très léger.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans titre</title> <script type="text/javascript"> function addchamps(idChamp) { try { var conteneur = document.getElementById(idChamp); var ligne = document.createElement('p'); var champ_input = document.createElement('input'); champ_input.setAttribute('type','file'); champ_input.setAttribute('name','userfile[]'); champ_input.setAttribute('size','89'); ligne.appendChild(champ_input); conteneur.appendChild(ligne); } catch(e) { alert(e); } } </script> </head> <body> <input type="button" value="Ajouter un nouveau champ de saisie" onclick="addchamps('champs_sup')" /> <div id="champs_sup"></div> </body> </html>

plus de doc ici http://fr.selfhtml.org/javascript/objets/node.htm

Add line

Posté : 30 sept. 2008, 11:51
par hi-logik
Merci pour vos réponses !

en effet l'ajax n'est pas forcément lourd ! c'est que le javascript est intéressant et je sais pas pourquoi je rechigne à mis mettre ! pourtant c'est un avantage certain !
je vais en manger un tas pour prendre l'habitude et puis je vais finir par l'adopter lol

est que je peux intégrer cette fonction dans du php car j'ai aussi un champ select qui contients des categories !

le but je vous explique c'est d'ajouter des titres d'albums à insérer dans une base de données !

donc ligne dis titre, nom d'artist, temps de la song etc

comme le nombre de titre peux varié je veux en ajouter une à chaque clics je pourrais faire plus simple je pense mais l'idée est intéressante et je voulais la développer à fin d'augmenter mes connaissances !

merci pour votre patience :)

Re: Add line

Posté : 30 sept. 2008, 18:14
par AB
est que je peux intégrer cette fonction dans du php car j'ai aussi un champ select qui contients des categories !
L'exemple que je t'ai donné plus haut permet d'ajouter à la volée (en js) un champ de formulaire. Ce que tu peux faire pour un champ tu peux le refaire pour d'autres...

Essaie de bien comprendre le mécanisme, puis rajoute des champs. Je t'ai donné un lien qui te permettra de comprendre les fonctions js utilisées.

En faisant

Code : Tout sélectionner

var champ_input = document.createElement('input'); champ_input.setAttribute('type','file'); champ_input.setAttribute('name','userfile[]'); champ_input.setAttribute('size','89');
javascript écrit l'équivalent html de

Code : Tout sélectionner

<input type="file" name="userfile[]" size="89">
Auparavant j'ai créé un élément <p>

Code : Tout sélectionner

var ligne = document.createElement('p');
et j'inclus mon champ_input dans cette ligne en faisant

Code : Tout sélectionner

ligne.appendChild(champ_input);

cela revient à dire qu'on ajoute un enfant - ici : champ_input - dans la ligne.

Ensuite j'inclus cette ligne dans l'élément html portant l'identifiant champs_sup en faisant

Code : Tout sélectionner

conteneur.appendChild(ligne);
sachant que

Code : Tout sélectionner

var conteneur = document.getElementById(idChamp);
et que j'ai passé 'champs_sup' comme argument à la fonction addchamps()

Donc au premier clic la page se transforme pour donner l'équivalent htm de

Code : Tout sélectionner

<body> <input type="button" value="Ajouter un nouveau champ de saisie" onclick="addchamps('champs_sup')" /> <div id="champs_sup"><p><input type="file" name="userfile[]" size="89"></p></div> </body>


au second clic

Code : Tout sélectionner

<body> <input type="button" value="Ajouter un nouveau champ de saisie" onclick="addchamps('champs_sup')" /> <div id="champs_sup"><p><input type="file" name="userfile[]" size="89"></p><p><input type="file" name="userfile[]" size="89"></p></div> </body>