Discussion :

[bzhades]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[sebhm]

Bonjour,

tu n'es vraiment pas loin de la solution :

ta liste d'albums :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

la fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[E.Bzz]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et une suggestion d'ergonomie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

album1, album2, album5

A+

[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+

[madevilts]

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.

[bzhades]

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