Afficher un exemple dans un tableau en fonction d'un champs de formulaire

**kilian67** · 22/02/2008, 10h49

Bonjour,

Je souhaite que d'après les choix qu'un utilisateur fait dans un formulaire de mise en page (police, taille, couleur, etc...) un exemple s'affiche dans un tableau en aperçu avant la validation de celui ci !

Voici le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<form action="validation.php" method="POST"><table border="3" cellspacing="0" width="95%" bordercolor="red" bordercolordark="#990000" bordercolorlight="#CC3333"><tr><td>
 
<table border="0" width="100%"><tr> <td class="Parametre_1">
<p>Personnalisation.</p>
<table border="1" width="30%" bordercolor="#999999" align="center">
<tr>
<td width="100%">
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</table>
</td>
</tr><tr><td class="Parametre_2">
<p>Entre le code couleur</p>
</td></tr><tr><td>
<input type="text" name="perso2" value="#FFFFFF" class="Cellules">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr><tr><td class="Parametre_2"><p>Choisis la taille du chiffre</p></td></tr><tr>
<td><select name="perso4" size="1">
<option value="8pt">8pt</option>
<option value="10pt">10pt</option>
<option value="12pt">12pt</option>
<option value="18pt">18pt</option>
<option selected value="24pt">24pt</option>
<option value="36pt">36pt</option>
</select></td>
</tr><tr>
<td class="Parametre_2"><p>Choisis la police du chiffre</p></td></tr> <tr>
<td><select name="perso6" size="1">
<option value="Arial Black">Arial Black</option>
<option value="Bernard MT Condensed">Bernard MT Condensed</option>
<option value="Bodoni MT Condensed" selected>Bodoni MT Condensed</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Garamond">Garamond</option>
<option value="Roman">Roman</option>
</select></td>
</tr>
<tr><td class="Parametre_2">
<p>Choisis la présentation du chiffre</p></td></tr><tr><td class="TailleTexte">
<p><input type="checkbox" name="perso8" value="<b>"><b> Gras</b></p>
<p><input type="checkbox" name="perso9" value="<i>"><i> Italic</i></p>
<p><input type="checkbox" name="perso10" value="<u>">&nbsp;<u>Souligné</u></p>
</td></tr><tr>
<td class="FormCache"></td></tr></table></td></tr></table>
<p><input type="submit" name="envoyer" value="Creer / Modifier / Visualiser"></p>
</form>

**SpaceFrog** · 22/02/2008, 11h36

sur le onchange de chacun des selects de paramètres...

tu modifies le style d'un td

Code :

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

1
2
3
4
 
var exemple=document.getElementById('montd').
montdt.style.fontFamily=document.forms[0].elements['fontselect'].value
...

**kilian67** · 23/02/2008, 11h56

Ok je vais mieux expliquer ce que je voudrai

Voila une image :

Nom : ex.jpg
Affichages : 227
Taille : 24,0 Ko

Ce que je souhaite c'est que la partie 1 qui est un tableau contenant du texte se modifie tous seul en fonction des choix fait en 2, 3 et 4 (sans valider le formulaire).

Je pense que je doit faire ça avec onchange mais je ne sais pas comment, les exemples que j'ai trouver font ouvrir une boite de dialogue me demandant de confirmer ou non le changement

Voir code du formulaire dans mon premier post !

**kilian67** · 27/02/2008, 15h01

Voila j'ai trouver ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language='javascript'> 
function RendVisiblePolice(texte) 
{ 
if (texte=="Algerian") 
document.getElementById("test").style.visibility= 'visible'; 
else 
document.getElementById("test").style.visibility= 'hidden'; 
} 
</script> 
<FORM ACTION="index.php" name="formulaire"> 
<SELECT size=1 onchange="RendVisibleVille(this.value)" name=police> 
<OPTION value="Algerian">Algerian</OPTION> 
        <option selected></option>
</SELECT> 
<div id="test" style="visibility:hidden;"> 
        <p><font face="Algerian">Algerian</font></p>
</div> 
<input type="submit"> 
</form>

C'est à peut près ce que je veut mais seulement je ne peut donner qu'un exemple à chaque sélect et ce que je souhaite c'est d'avoir un tableau ou j'aurai mis du texte a l'intérieur et que la police change en fonction de ce que l'utilisateur aura choisi dans la liste

**htr999** · 28/02/2008, 15h25

salut
je trouve que ce qu'a expliqué SpaceFrog correspondait bien à ton problème.
je suppose que dans ton code initial

Code :

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

1
2
3
4
5
 
<td width="100%">
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>

est l'endroit où tu veux que les changements s'effectuent.
il suffit de changer ton <td width="100%"> à ce ci
<td id="montd" width="100%"> et le reste va avec l'explication de SpaceFrog.

**kilian67** · 06/03/2008, 10h17

J'ai trouver un début de solution voici mon tableau ou sera afficher l'exemple :

Code :

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

1
2
3
4
 
<td id="exemple" width="100%">
<p>voici un exemple de l'affichage selon vos choix<p>
</td>

que j'ai changer en :

Code :

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

1
2
3
4
5
6
7
 
<td id="exemple" width="100%">
<script language="JavaScript"> 
exemple.style.fontSize="10pt";
</script>
<p>voici un exemple de l'affichage selon vos choix<p>
</td>

Cela fonctionne si je change la valeur 10pt en 36pt (ou autre) mais je souhaite récuperer la valeur du select aillant l'id "perso4" et la je bloque :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<select name="perso4" size="1">
<option value="8pt">8pt</option>
<option value="10pt">10pt</option>
<option value="12pt">12pt</option>
<option value="14pt">14pt</option>
<option value="16pt">16pt</option>
<option value="18pt">18pt</option>
<option value="20pt">20pt</option>
<option value="22pt">22pt</option>
<option selected value="24pt">24pt</option>
<option value="26pt">26pt</option>
<option value="28pt">28pt</option>
<option value="30pt">30pt</option>
<option value="32pt">32pt</option>
<option value="34pt">34pt</option>
<option value="36pt">36pt</option>
</select>

**SpaceFrog** · 06/03/2008, 10h34

comme dit plus haut

sur le onchange du select :

Code :

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

1
2
var selectionSize=document.getElementsByName('perso4')[0].value
document.getElementById('exemple').style.fontSize=selectionSize;

**kilian67** · 07/03/2008, 09h22

Merci SpaceFrog ce que tu m'a donner fonctionne pour la taille du texte !!

Par contre j'ai fait ça pour la couleur

Code :

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

1
2
onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.fontColor=selectionColor;"

qui récupère la valeur de

Code :

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

<input type="text" id="perso2" value="#FFFFFF">

et pour la police

Code :

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

1
2
3
 
onchange="var selectionFace=document.getElementsByName('perso6')[0].value
document.getElementById('exemple').style.fontFace=selectionFace;"

qui récupère les infos de

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<select name="perso6" size="1">
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Bernard MT Condensed">Bernard MT Condensed</option>
<option value="Bodoni MT Condensed" selected>Bodoni MT Condensed</option>
<option value="Bookman Old Style">Bookman Old Style</option>
<option value="Century Gothic">Century Gothic</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier">Courier</option>
<option value="Courier New">Courier New</option>
<option value="Franklin Gothic Medium">Franklin Gothic Medium</option>
<option value="Garamond">Garamond</option>
<option value="Georgia">Georgia</option>
<option value="Impact">Impact</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
<option value="Monotype Corsiva">Monotype Corsiva</option>
<option value="Palatino Linotype">Palatino Linotype</option>
 <option value="Roman">Roman</option>
<option value="Sylfaen">Sylfaen</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
</select>

**SpaceFrog** · 07/03/2008, 19h11

Code :

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

1
2
onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.color=selectionColor;"

**kilian67** · 08/03/2008, 12h26

Voila j'ai a peu de chose près résolu mon problème sauf pour le champ ou je demande de choisir la couleur :

Code :

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

1
2
3
4
<form name="maForm" action="?" method="post">
  <div id="CP"></div><script language="JavaScript">var CP = new Color_Picker("CP");</script>
  <input type="text" id="perso2" value="#FFFFFF" class="Cellules" onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.color=selectionColor;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/color.gif" width="35" height="28" border="0" align="absmiddle" onClick="CP.Show('perso2', 'right');"> </form>

En effet lorsque j'utilise le script qui me permet de choisir la couleur par le biais d'une palette la valeur change bien dans le champ de formulaire mais elle n'est pas prise en compte par le onchange !

**kilian67** · 09/03/2008, 14h28

En fait mon champ perso2 est rempli par l'intermédiaire d'un autre javascript (une palette de couleur) et le onchange n'est pas pris en compte dans ce cas la !

Y a t'il un autre moyen de contourner ce problème ?

**SpaceFrog** · 10/03/2008, 08h48

Code :

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

1
2
onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.color=selectionColor;"

c'est supposé faire quoi ça ?

**kilian67** · 10/03/2008, 13h42

Envoyé par SpaceFrog

Code :

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

1
2
onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.color=selectionColor;"

c'est supposé faire quoi ça ?

C'est supposé changer la couleur du texte contenu dans le td nommé exemple.

Cela fonctionne si je saisi manuellement le code de la couleur (par ex : #FFFFFF) et que je clic sur un endroit quelconque de la page mais le problème vient du fait que j'utilise un autre script qui fait appel a une palette de couleur donc le champs est rempli par le clic sur la palette mais le onchange n'est plus alors pris en compte !

**SpaceFrog** · 10/03/2008, 13h44

la syntaxe n'est pas correcte !

Code :

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

onchange="document.getElementById('exemple').style.color=document.getElementsByName('perso2')[0].value;"

tu mets deux instructions et tu ne les sépares pas par un point virgule ...
et de toute façon quel est l'intéret de passer par une variable intermédiaire ???

**kilian67** · 10/03/2008, 14h01

Envoyé par SpaceFrog

Code :

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

1
2
onchange="var selectionColor=document.getElementsByName('perso2')[0].value
document.getElementById('exemple').style.color=selectionColor;"

J'ai suivi le code que tu as poster plus haut !

**SpaceFrog** · 10/03/2008, 15h13

Comme quoi je ne dis pas que des choses bien ...

**kilian67** · 10/03/2008, 15h17

C'est pas grave au moins maintenant j'ai modifier le code comme tu l'a conseillé et cela fonctionne et en plus c'est plus clair !

Par contre as tu une astuces pour que le onchange soit pris en compte quand j'utilise la palette qui change le champ ?

**SpaceFrog** · 10/03/2008, 15h19

ben à la fin de ta fonction de palette tu fais pareil !
ou tu lances le onchange du select ...

**kilian67** · 10/03/2008, 15h52

Envoyé par SpaceFrog

ben à la fin de ta fonction de palette tu fais pareil !
ou tu lances le onchange du select ...

Je suis vraiment pas doué en javascript, j'ai essayer de placer le code dans le javascript de la palette a plusieurs endroit mais cela ne fonctionne pas !