11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Alors, y a un mois, j'embêtais les gens avec du PHP. Depuis, j'ai acheté un livre et mis le PHP Manual dans les favoris, ça va mieux...
Maintenant, au tour de Javascript (j'ai acheté un bouquin, mais il me tombe des mains...).

Je recherche un moyen d'ajouter des chaines de caractères (des titres) dans un textarea en cliquant sur les éléments d'une liste. Chaque titre devrait se disposer l'un dessous l'autre.

L'idée, c'est d'avoir à la fin une chaîne contenant tous les titres sélectionnés, que je mets dans une array, etc, vous voyez l'idée.

J'avais trouvé là un truc ressemblant à ça (le 8ème), mais ça incrémente une liste au lieu d'un textarea, et j'arrive pas à récupérer les données de la liste dans laquelle les chaines sont ajoutées...

Si quelqu'un avait une idée...

Merci d'avance...
Modifié par ledamien (13 Jan 2008 - 04:23)
Hello,

Pour me simplifier la vie, j'utilise jQuery.

Ca donnerait un truc comme ça :
$('#textarea').text('Salut, comment ça va ?') ;
ou ça 
$('#textarea').html('Salut, comment ça va ?') ;
Hello,

Pas bien compris à quoi ça doit ressembler au final.
Ce que tu décris ressemble pas mal à un bête système de boutons radio (on a une liste d'options avec boutons radio, on coche les options souhaitées, et on envoie le formulaire...). Ou alors j'ai lu de travers. Smiley cligne
Modifié par Florent V. (11 Jan 2008 - 11:17)
Pardon, j'ai un peu coupé court hier, je vais mieux réexpliquer.

Alors, j'ai d'un côté une liste de noms de fichiers. Je veux que l'utilisateur, en cliquant sur un nom et/ou en appuyant sur un bouton puisse transférer les noms de fichiers sélectionnés dans une autre liste (ou un textarea, on s'en fout...). Cette autre liste, une fois envoyée, est récupérée par un script (en PHP, donc) pour créer un fichier texte contenant genre :
<?include('mypath/mon fichier01.txt'>
<?include('mypath/mon fichier02.txt'>
etc.

Un peu la même idée que "onclick='document.forms["ecrire"].elements["fichier"].value="mon_fichier" ', mais sans écraser la valeur, juste en lui ajoutant une chaine...

L'idée est que l'utilisateur puisse choisir ses fichiers préférés, leur ordre d'apparition, ou encore supprimer un de ses choix sans, à chaque fois, devoir passer par un script PHP...

Comme je le disais, j'avais trouvé un script qui semblait convenir. Il consistait en deux listes et deux boutons. La premiere liste contenait les valeurs à sélectionner. En cliquant sur le bouton "add", ça transférait la ligne sélectionnée dans la seconde liste. En cliquant sur un élement dans la seconde liste et en cliquant sur le bouton "remove", ça le remettait dans la première liste. Très bien, mais jusqu'à maintenant, je n'ai pas réussi à trouver un moyen de récupérer les éléments dans la seconde liste...

Peut être une ignorance de débutant en PHP,pour ce dernier cas, alors, si vous avez des idées...

Quand à JQuery, euh... J'essaye d'apprendre le javascript dans l'optique d'apprendre ensuite JQuery, mais c'est encore plus fouillis que le PHP (ou devrais-je dire : PHP me semble limpide, JS non...). A ce propos, si vous avez des idées en bouquins sur le sujet, en Français ou en Anglais...

Voilà. J'espère que c'est plus clair, et merci d'avance d'essayer de m'aider...
Salut
Le script de bascule n'a d'intéret que pour les contextes où javascript est acitivé à coup sûr. Pour un site "classique", on se contentera d'un select multiple ou de cases à cocher :
<select id="fichiers" name="fichiers[]" multiple="multiple" size="3">
    <option value="file1.txt">file1.txt</option>
    <option value="file2.txt">file2.txt</option>
    <option value="file3.txt">file3.txt</option>
</select>

que tu récupères dans un tableau en PHP. Si tu es en methode post :
foreach($_POST['fichiers'] as $fichier)
{
    include $fichier;
}

(Attention de bien faire les vérifications sur les fichiers à inclure...)

Si tu tiens vraiment à la bascule, il faut passer le deuxième select en multiple, et sélectionner tous les éléments avant l'envoi ! :
for (var indice = 0, l = document.forms["formulaire"].elements["nom_liste"].options.length; indice < l; ++indice)
{
    document.forms["formulaire"].elements["nom_liste"].options[ indice].selected = true;
}

La récupération se fait de la même manière que précédemment.

a+
Modifié par jeje (12 Jan 2008 - 16:23)
a écrit :

Comme je le disais, j'avais trouvé un script qui semblait convenir. Il consistait en deux listes et deux boutons. La premiere liste contenait les valeurs
à sélectionner. En cliquant sur le bouton "add", ça transférait la ligne sélectionnée dans la seconde liste. En cliquant sur un élement dans la seconde
liste et en cliquant sur le bouton "remove", ça le remettait dans la première liste. Très bien, mais jusqu'à maintenant, je n'ai pas réussi à trouver un
moyen de récupérer les éléments dans la seconde liste...

IL y a deux façons de récupérer tous les éléments de la seconde liste, mais les deux nécéssitent javascript et donc, ne fonctionnent pas s'il est désactivé.

La première a déjà été évoquée, il s'agit de sélectionner tous les éléments juste avant de valider le formulaire.

La deuxième consiste, à chaque fois qu'on appuie sur add ou sur remove, à mettre à jour un champ caché contenant l'ensemble des valeurs.

A mon avis l'une est aussi pratique que l'autre, ça dépend de ce qu'on veut en faire après. De toute façon on a besoin de js et là on n'a pas le choix de faire autrement, c'est comme quand il faut proposer une liste où on peut changer l'ordre des éléments, sans js c'est compliqué...
Mmh...

La proposition pour la liste à bascule ne m'est compréhensible hélas qu'en théorie. Si je comprends le principe, l'endroit où je devrais poser ce bout de script dans le script de la liste à bascule elle-même m'est encore un peu, heu, aléatoire...
Je vais peut être m'assoir dessus, en attendant d'avoir une illumination qui me fera tout comprendre...

L'option toute bête de cases à cocher sera certainement plus simple dans un premier temps, en chargeant un titre à la fois. Moins pratique, mais vous m'avez convaincu (et, face à des connaisseurs de codes, je me sens toujours un peu vaincu, et un peu con, aussi...) : JS est à utiliser avec parciemonie, et, ajouterais-je, quand on sait ce qu'on fait.

Merci bien en tous cas pour ces idées, ça va m'avancer !
ledamien a écrit :
L'option toute bête de cases à cocher sera certainement plus simple dans un premier temps, en chargeant un titre à la fois. Moins pratique [ ... ]

Pourquoi un seul à la fois ? On parle bien de cases à cocher (checkbox) et pas de boutons radio, donc tu peux sélectionner autant de fichiers que tu veux :

<p>
    <label for="fichier1">fichier1.txt</label>
    <input type="checkbox" id="fichier1" name="fichiers[]" value="fichier1.txt" />
</p>
<p>
    <label for="fichier2">fichier2.txt</label>
    <input type="checkbox" id="fichier2" name="fichiers[]" value="fichier2.txt" />
</p>

Après, entre cases à cocher ou select multiple, c'est une question d'ergonomie, en fonction du nombre d'items, mais le principe reste le même.

a écrit :
La proposition pour la liste à bascule ne m'est compréhensible hélas qu'en théorie. Si je comprends le principe, l'endroit où je devrais poser ce bout de script dans le script de la liste à bascule elle-même m'est encore un peu, heu, aléatoire...

Il faut placer le code de sélection dans une fonction que tu appelles lors de la soumission du formulaire :
function selectionnerTout ( )
{
    // le code de sélection du select multiple
}

<form ... onsubmit="selectionnerTout()">

Mais, comme on te l'a dit, c'est se prendre la tête pour pas grand chose. En plus, il te faudra adapter la bascule pour gérer la sélection de plusieurs fichiers dans les listes, du travail en plus, donc.
Pardon de ne pas avoir répondu plus tôt, mais merci pour ces précisions, ça va m'inspirer pour faire avancer le schmilblick...