Modification d'un champ de formulaire par onClick ?

Bonjour/soir

Je suis en train de bloquer sur un petit problème qui doit sans doute pouvoir se résoudre simplement, mais mes connaissance en JS sont trop limités (voires nulles)

J'ai un formulaire avec un champ de type texte (code ci dessous)

Code:

---

1 2 3 4 5 6 7 8 9 10

<form name="addToAlbum" method="POST" enctype="multipart/form-data" action="index.php?p=images&mod=upload"> <fieldset class="filedsetUpload"> <legend>Ajoutez cette photo à un album</legend> <label for="album">Album (séparez les noms par une virgule) : </label> <input id="album" name="albums" type="text" /><br /> </fieldset> <input type="submit" name="addAlbums" value="Insérez dans l(es) album(s)" /> </form>

---

J'ai affiché au dessus une liste des albums disponible (
<ul>
<li> album 1</li>
<li> album 2</li>
</ul>)
j'aimerais que quand on click sur un album de la liste, on ajoute dans l'input 'album' le nom de l'album suivit d'une virgule, de manière à récupérer une liste des albums formaté comme ça :
(string) album1, album2, album5,
je virerais la dernière virgule au besoin par le script php. Ce formatage me permet de faire très facilement une inclusion dans ma BDD, donc j'aimerais éviter de faire un checkbox par album (question d'ergonomie, sinon, c'est aussi faisable)

j'imagine qu'on doit pourvoir faire ça avec quelque chose du type
<ul>
<li onClick='addAlbum.qquchose += "album1, "'> album 1</li>
<li onClick='addAlbum.qquchose += "album2, "'> album 2</li>
</ul>

mais là, je ne sais pas comment procéder.

Merci d'avance de votre aide.

Bonjour,

tu n'es vraiment pas loin de la solution :

ta liste d'albums :

Code:

---

1 2 3 4

<ul> <li onClick="addAlbum(this)"> album 1</li> <li onClick="addAlbum(this)"> album 2</li> </ul>

---

la fonction javascript :

Code:

---

1 2 3

function addAlbum(le_li) { document.getElementById('album').value+=le_li.firstChild.nodeValue; }

---

et je te conseille pour le input 'album' d'avoir les attributs Name et Id identiques (y'avait un 's' d'un coté et pas de l'autre)

Bonjour,

Citation:

---

Envoyé par sebhm

et je te conseille pour le input 'album' d'avoir les attributs Name et Id identiques (y'avait un 's' d'un coté et pas de l'autre)

---

+1
Juste

Code:

---

1 2 3

function addAlbum(le_li) { document.getElementById('album').value+=le_li.firstChild.nodeValue + ','; }

---

et une suggestion d'ergonomie

Code:

---

<li style="cursor:pointer;" onclick="addAlbum(this)"> album 1</li>

---

EDIT : pour info, en utilisant un select multiple, sur le serveur tu aurais bien récupéré les values sélectionnées sous la forme

Code:

---

album1, album2, album5

---

A+

Par contre, à cause des noeuds vides, je me demande s'il ne vaudrait pas mieux utiliser le_li.innerHTML plutôt que le_li.firstChild.nodeValue ... :?

A+

Citation:

---

Envoyé par E.Bzz

Par contre, à cause des noeuds vides, je me demande s'il ne vaudrait pas mieux utiliser le_li.innerHTML plutôt que le_li.firstChild.nodeValue ... :?

A+

---

+1, ça me parait mieux et plus simple.

ok, merci beaucoup, ça m'aide bien ... allez, plus que les 3/4 à faire... je tiens le bon bout :D (mais le plus dur, à savoir se remettre au code, est derrière moi, reste plus qu'à taper)