Personnalisation d'objets côté visiteur

Code:

---

1 2 3 4 5 6 7

function change_cellule(texte) { // le paramètre texte n'est pas utilisé !?! var oZone = document.getElementById('zone'); // récupération de l'élément ayant pour ID zone if ( oZone) { // si l'objet existe var text = oZone.value; // on place dans la variable text la valeur de la propriété value de l'élément oZone remplirInput( text); // on appelle la fonction en passant en paramètre la variable txet } }

---

et dans la fonction appellée

Code:

---

1 2 3 4 5 6 7

function remplirInput( param) { // on utilise le paramètre passé // var zone = document.getElementById("zone");{ // var texte = zone.texte ; // document.getElementById('text').setAttribute('value', texte); var oDest = document.getElementById('text');// récupération de l'élément ayant pour ID text oDest.value = param; // on place dans la propriété value de l'élément oDest la valeur du paramètre }

---

tu devrais peut être jeter un coup d'oeil du coté de la
:faq: FAQ JavaScript
plein de bonnes choses pour démarrer ;)

Pour compléter ce que vous écrit NoSmoking

Je suis aussi perplexe devant votre fonction change_cellule(texte), je ne comprends pas ce que vous souhaitez faire ?

Sur le même modèle que ce que SylvainPV vous a déjà donné, si vous voulez l'utiliser pour changer le texte écrit à l'écran :

edit: voir remarques du même SylvainPV un peu plus loin

Code:

---

1 2 3 4 5 6

function change_cellule ( texte ) { var zone = document.getElementById("zone"); if (zone) { zone.innerHTML = texte; } }

---

et vous l'appelez avec

Code:

---

change_cellule("mon texte");

---

si vous voulez l'utiliser pour changer le texte ou lire le texte déjà présent à l'écran

Code:

---

1 2 3 4 5 6 7 8 9

function change_cellule ( texte ) { var zone = document.getElementById("zone"); if (zone) { if (texte != null) { zone.innerHTML = texte; } return zone.innerHTML; } }

---

et vous pouvez l'utiliser pour lire avec

Code:

---

var texte = change_cellule();

---

ou modifier le texte avec

Code:

---

change_cellule("mon texte");

---

si vous voulez l'utiliser pour changer le texte ou lire le texte déjà présent à l'écran et reflèter les changements dans votre formulaire

Code:

---

1 2 3 4 5 6 7 8 9 10

function change_cellule ( texte ) { var zone = document.getElementById("zone"); if (zone) { if (texte != null) { zone.innerHTML = texte; remplirInput(); } return zone.innerHTML; } }

---

(même conditions d'utilisation que la version précédente)

Le contenu 'textuel' de 'zone' s'obtient avec la propriété 'innerHTML' ou 'textContent'. La propriété 'value' ne renverra pas ce que vous voulez parce que 'zone' est, dans votre page html une balise '<div ...>'. La propriété 'value' s'utilise plutôt avec les contrôles de formulaire, ce que vous faites dans 'remplirInput()' avec, par exemple :

Code:

---

1 2 3

... document.getElementById('fontSize').setAttribute('value', fontSize); ...

---

Vous mettez à jour la propriété 'value' de la balise 'input' (un controle de formulaire) qui a pour 'id' : 'fontSize'.

Pour renseigner correctement la balise '<input type="hidden" name="text" id="text" value="">' dans 'remplirInput()' :

Code:

---

1 2 3 4 5 6 7

function remplirInput () { var zone = document.getElementById("zone");   var texte = zone.innerHTML; document.getElementById('text').setAttribute('value', texte); ... }

---

Merci à vous pour ces mines d'informations....

J'ai de quoi bosser pendant.... :D
Mais pour répondre à la perplexité de Lysandro je vous mets le lien de ma page en construction ca vous sera sans doute plus parlant que les explications souvent vaseuses que je vous donne....

http://vmfloc.com/atelier/teetext.php

Voilà je me replonge dans les codes....

Bon fin de week end :pc:

Utilisez textContent plutôt que innerHTML, ça évitera que du HTML soit interprété par erreur.

Code:

---

1 2 3 4 5 6

function setZoneTextContent(valeur) { var zone = document.getElementById("zone"); if (zone) { zone.textContent = valeur; } }

---

A noter que vous n'avez pas besoin d'appeler votre fonction remplirInput à chaque modification, l'appeler une fois juste avant l'envoi de données au serveur est suffisant. Dommage que vous n'ayez pas creusé plus loin la piste AJAX, c'est moins compliqué qu'il n'y paraît et les gains sont notables.

Ouep, remarque pertinente. J'ai hésité à cause des problèmes de compatibilité des navigateurs mais ce n'est peut-être plus d'actualité ? Sinon un contrôle textarea à la place du div pour "zone" ?

textarea est plus délicat à styliser. Si on doit supporter les vieux navigateurs (IE < 9), il faut aussi attribuer zone.innerText.

Merci Sylvain,

Aurais tu un bon tuto pour débutant (de base) pour AJAX à me conseiller, j'ai parcouru quelques forums et quelques tutos, mais de prime abord, ça me parait tellement compliqué, et, surtout qu'un peu partout j'ai lu que c'était un bon moyen pour faire ce que j'aimerai mettre en œuvre

Merci

Pour un débutant, la bibliothèque jQuery simplifie énormément la gestion des requêtes AJAX. Developpez.com regorge de tutoriels avec jQuery et AJAX. A moins que tu ne veuilles pas utiliser de bibliothèques tierces, c'est la piste que je te conseillerais.

Bonsoir,

Et oui encore moi...

Je voudrai juste savoir si je suis sur le bon chemin et surtout si j'ai bien compris.... voir mes commentaires svp...

Code:

---

1 2 3 4 5 6 7 8

function setZoneTextContent(valeur) { var zone = document.getElementById("zone"); if (zone) { //l'objet existe zone.textContent = valeur; //On réupère la valeur du contenu de la variable zone var text = zone.textContent; //Je donne au contenu de la variable le nom "text" que je récupère dans mon input id="text" remplirInput(); // ça si j'ai bien compris c'est pas vraiment nécessaire.... mais bon } }

---

Avec ça ma variable est "undefined"
Par contre est-ce que ça à un rapport avec ceci ?:

Code:

---

1 2 3 4 5 6 7

function remplirInput() {     var zone = document.getElementById("zone");   var texte = zone.texte ; document.getElementById('text').setAttribute('value', texte);

---

est ce que je devrai donner à "var texte = zone.textContent" ?

Merci à vous pour votre patience

zone.texte n'existe pas, je ne sais pas où tu as été péché ça mais il n'y a jamais eu de noms de propriétés en français dans les API natives JavaScript. La propriété est zone.textContent

Il faudrait revenir aux bases du JavaScript car j'ai l'impression que tu comprends les affectations de variable à l'envers :s

Voilà mes commentaires de commentaire :

Code:

---

1 2 3 4 5 6 7 8

function setZoneTextContent(valeur) { var zone = document.getElementById("zone"); if (zone) { //l'objet existe -- > (existe dans le document) zone.textContent = valeur; //On réupère la valeur du contenu de la variable zone --> non c'est l'inverse, on attribue au contenu de la zone la valeur var text = zone.textContent; //Je donne au contenu de la variable le nom "text" que je récupère dans mon input id="text" ---> non, cette ligne ne sert strictement à rien, tu viens de l'assigner à valeur la ligne au dessus et en plus tu ne te sers pas de la variable text que tu déclares remplirInput(); // ça si j'ai bien compris c'est pas vraiment nécessaire.... mais bon ---> c'est nécessaire si tu veux toujours passer par des champs input cachés pour enregistrer tes données, mais tu n'es pas obligé de l'appeler ici, tu peux te contenter de l'appeler au moment où tu soumets le formulaire } }

---

Bonjour,

Ca y est ca fonctionne

Code:

---

1 2 3 4 5 6 7

function setZoneTextContent(valeur) { var maVariable = document.getElementById("zone"); if (zone) { zone.textContent = valeur; remplirInput(maVariable); } }

---

Et ce grace à vous et à votre patience :hola:

Mais vous en avez pas fini avec moi.... ;)

Je vais maintenant m'attaquer au passage de mon image de fond.... et donc, j'ai une fonction 'remplirInput' qui concerne tout ce qu'on trouve dans 'zone' et ce que je peux en faire une autre sans qu'il y ait d'interaction ? du genre ? ben voilà...

Code:

---

1 2 3 4

function remplirInput() { var monImage = document.images["img"].src; document.getElementById('myPic').setAttribute('src', monImage); }

---

Pour faire simple est-ce que ça à une chance de fonctionner ?

Merci

Citation:

---

Envoyé par bernard26000

Pour faire simple est-ce que ça à une chance de fonctionner ?

---

Va savoir... pour moi ton premier code n'aurait jamais dû fonctionner ! Où est-ce que tu déclares ta variable zone ? Je crois que tu as une variable globale sur les bras, et c'est pas ce que tu veux...

Une deuxième fonction remplirInput bien sûr ne marchera pas, si tu as deux fonctions qui s'appellent pareil comment le code saurait laquelle appeler ? La deuxième déclaration va écraser la première tout simplement. Et d'ailleurs, je me demande bien pourquoi tu veux une autre fonction remplirInput si celle-ci fait autre chose que de remplir des inputs... :weird:

Enfin document.images ne s'utilise qu'avec des index numériques à ma connaissance, donc je passerais plutôt par document.getElementById.

@SylvainPV: images comme forms, links et d'autres sont des (HTML)collections qui peuvent s'accéder des deux façons : soit un index numérique, soit la valeur d'un 'id' ou d'un 'name'. (refs: DOM2HTML pour HTML4 & XHTML, HTML5 sinon).

@SylvainPV: Question candide, pourquoi ne pas utiliser directement le formulaire, plutot que de créer des structures de saisie à part pour les recopier vers le formulaire avec ses controles en hidden ? je me disais que ce serait peut-être plus simple pour tout le monde, et comme bernard26000 à l'air de se débrouiller en CCS ..?

Décidément je découvre des specs aujourd'hui... Mais ça me paraît toujours autant incohérent: qu'est-ce qui se passe si une image a un name="toto" et une autre image un id="toto" par exemple ? Ça me paraît pas clair, je préfère rester sur les bonnes vieilles méthodes :p

Un formulaire sans champs cachés est bien sûr une option, c'est juste que mettre toutes les propriétés CSS dans des champs visibles me paraissait pas très user-friendly.

Citation:

---

Envoyé par SylvainPV

qu'est-ce qui se passe si une image a un name="toto" et une autre image un id="toto" par exemple ?

---

l'attribut 'name' sur une image est déprécié en HTML4 et n'existe plus en HTML5 :), mais sur un formulaire ou un lien : bin, faudrait que je recherche dans la spec (et laquelle ?) où c'est marqué mais 'id' et 'name' partage le même espace de noms. Autrement dit avoir sur deux éléments différents un 'id' et un 'name' comportant la même valeur c'est la même chose que si c'était deux 'id' avec la même valeur. C'est ... mal :D

C'est là pour les liens HTML4 avec un bel exemple illégal
En HTML5, je n'arrive pas à le trouver. Faudrait que je lise la spec complète ...

Citation:

---

Envoyé par bernard26000

Ca y est ca fonctionne

Code:

---

1 2 3 4 5 6 7

function setZoneTextContent(valeur) { var maVariable = document.getElementById("zone"); if (zone) { zone.textContent = valeur; remplirInput(maVariable); } }

---

Et ce grace à vous et à votre patience :hola:

---

je reste perplexe...:koi:

Salut nosmoking...

Oui ca fonctionne très bien, peut être ai-je innové qq chose :whistle: mais j'ai le set ici

Code:

---

1 2	var maVariable = zone.textContent ; document.getElementById('maVariable').setAttribute('value', maVariable);

---

et le rempliInput ici

Code:

---

1 2 3 4 5 6 7

function setZoneTextContent(valeur) { var maVariable = document.getElementById("zone"); if (zone) { zone.textContent = valeur; remplirInput(maVariable); } }

---

que tu peux tester ici
http://vmfloc.com/atelier/teetext.php
par contre pour passer l'image de fond (ici le tee-shirt) je suis complètement dans les choux.... :arf:

Je vais clore ce sujet et en ouvrir un uniquement consacré au passage de mon image de fond

Merci à tous ceux qui m'on bien aidé sur le sujet