rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Afficher un exemple dans un tableau

Posté par kilian67, le vendredi 29 février 2008 à 19:40:42
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 !

En fait j'ai un tableau (par exemple) :

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

et un formulaire (par exemple)

<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>
<p>Personnalisation.</p>
</td>
</tr><tr><td>
<p>Entre le code couleur</p>
</td></tr><tr><td>
<input type="text" name="perso2" value="#FFFFFF">     </td>
</tr><tr><td><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><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>
<p>Choisis la présentation du chiffre</p></td></tr><tr><td>
<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>"> <u>Souligné</u>&­lt;/p>
</td></tr><tr>
<td></td></tr></table></td><­;/tr></table>
<p><input type="submit" name="envoyer" value="Créer"></p>
</form>

Ce que je veut c'est que lorsque l'utilisateur fait un choix parmi les listes et autres cases a remplir que le texte inscrit dans le tableau plus haut change en fonction des valeurs !

En fait s'il choisi en gras, en italique et en souligné il faut que s'affiche ceci :

Voila ce que je veut

Kilian67
Configuration: Windows XP
Internet Explorer 7.0
Répondre à kilian67  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le samedi 1 mars 2008 à 18:34:11
salut,

avec un p'tit bout de JS.

il faut utiliser l'évènement 'onchange' de chacun des <input> que tu feras pointer vers une fonction récupère les valeurs de tous les paramètres puis l'applique à ton texte exemple. pour retrouver les balises en JS il faut leur attribuer un identifiant.
une base à travailler :

HTML 
<p id="preview">Texte exemple</p>
<input id="input1" onchange="displayPreview()" />
<input id="input2" onchange="displayPreview()" />
<input id="input3" onchange="displayPreview()" />

JS 
displayPreview()
{
	var font = document.getElementById( 'input1' );
	var size = document.getElementById( 'input2' );
	var color = document.getElementById( 'input3' );
	
	var preview = document.getElementById( 'preview' );
	
	if( font && size && color && preview ) 
	{
		preview.style.font = font.value;
		preview.style.fontSize = size.value;
		preview.style.color = color.value;
	}
}


[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
kilian67, le lundi 3 mars 2008 à 09:55:35
Merci Dalida mais cela ne fonctionne pas pour moi !! et ce n'est pas tous a fait ce que je veut je pense
   
Répondre à kilian67

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 mars 2008 à 10:04:22
salut,

pourquoi cela ne fonctionne-t-il pas et que veux-tu précisément ?

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
kilian67, le lundi 3 mars 2008 à 10:13:57
Ben en fait j'ai un tableau auquel j'ai donner id "exemple"

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

et je souhaite qu'un exemple de style du texte s'affiche dans ce tableau en fonction de ce que l'utilisateur choisira dans le formulaire plus haut, plus précisément perso2 (couleur du texte), perso4 (taille du texte), perso6 (police du texte), perso8 (texte en gras), perso9 (texte en italic) et perso 10 (texte souligné).
   
Répondre à kilian67

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le lundi 3 mars 2008 à 14:04:12
et en quoi ce que je t'ai filé ne correspond pas ?
ce n'est qu'une idée, le <div> tu peux le remplacer par n'importe quelle autre élément, idem pour les champs du formulaire.

c'est seulement le principe que je te présente :
• l'évènement 'onchange' dans le formulaire
• une fonction qui collecte les infos de style et les applique à l'exemple

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 kilian67, le lundi 3 mars 2008 à 20:34:13
En fait j'ai fait ça :

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sans titre</title>
<meta name="generator" content="Namo WebEditor v6.0">
<script language="JavaScript">
displayPreview()
{
var font = document.getElementById( 'input1' );
var size = document.getElementById( 'input2' );
var color = document.getElementById( 'input3' );

var preview = document.getElementById( 'preview' );

if( font && size && color && preview )
{
preview.style.font = font.value;
preview.style.fontSize = size.value;
preview.style.color = color.value;
}
}</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p id="preview">Texte exemple</p>
<input id="input1" onchange="displayPreview()" />
<input id="input2" onchange="displayPreview()" />
<input id="input3" onchange="displayPreview()" />
</body>

</html>

et j'ai des erreurs sur la page mais je ne sais pas les quelles !
   
Répondre à kilian67
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger FreeMind 0.8.1FreeMind - FreeMind est un logiciel de Mind mapping entièrement libre, permettant de créer des cartes heuristiques permettant de...Catégorie: Organisation
Licence: Open Source
Télécharger MediaInfo 0.7.7.4MediaInfo - MediaInfo fournit la liste des codecs nécessaires ainsi que des informations techniques sur vos fichiers vidéo et audio. ...Catégorie: Codecs
Licence: Open Source
Télécharger ADSL Autoconnect 206F7ADSL Autoconnect - ADSL Autoconnect est un logiciel très puissant qui permet de gérer de manière simple et efficace sa connexion Internet ADSL...Catégorie: ADSL
Licence: Freeware/gratuit
Télécharger PSPad 4.5.2PSPad - PSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS,...Catégorie: Développement
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Afficher un exemple dans un tableau »