Afficher un exemple dans un tableau en fonction d'un choix dans un formulaire

Signaler
Messages postés
10
Date d'inscription
mercredi 15 août 2007
Statut
Membre
Dernière intervention
17 juillet 2008
-
Messages postés
1
Date d'inscription
lundi 22 décembre 2008
Statut
Membre
Dernière intervention
18 mai 2009
-
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%">
voici un exemple de l'affichage selon vos choix
</td>

et un formulaire (par exemple)

<form action="validation.php" method="POST"> 
<table border="0" width="100%">----
                        ,
                            Personnalisation.

                        </td>
----
Entre le code couleur, ----
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,
----
Choisis la taille du chiffre, ----

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

Choisis la police du chiffre, ----

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

----
Choisis la présentation du chiffre, ----
Gras

"> Italic

">&nbsp;Souligné
</td></tr></table>

</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 une taille de 5 avec la police Courrier New en couleur rouge, en gras, en italique et en souligné il faut que s'affiche ceci :

Voila l'affichage que je souhaite

Kilian67

6 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,

    joue avec le style de ce td....

    tous les éléments html peuvent avoir <.... style="font-family:euh;font-size:17px;.... " ... >
       en javascript on s'y adresse le_td_en_question.style.fontSize="12px";   par exemple
       pour le reste un petit coup d'oeil sur le css...

<hr />                Cordialement            Bul        
Messages postés
10
Date d'inscription
mercredi 15 août 2007
Statut
Membre
Dernière intervention
17 juillet 2008

Merci bultez jusqu'a la j'ai bien saisi la syntaxe en javascript mais ce que je ne comprend pas c'est ou mettre tous ça !

Kilian67
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>mais ce que je ne comprend pas c'est ou mettre tous ça !
    euh... là, où, quand... tu en a besoin.
<hr />                Cordialement            Bul        
Messages postés
10
Date d'inscription
mercredi 15 août 2007
Statut
Membre
Dernière intervention
17 juillet 2008

Ok c'est bon j'ai saisi comment et ou mettre ton petit bout de code mais en fait j'ai mon tableau ou sera afficher l'exemple :

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

 que j'ai changer en :

<td id="exemple" width="100%">
<script language="JavaScript">            
exemple.style.fontSize="10pt";
</script>
voici un exemple de l'affichage selon vos choix
</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" :

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

Kilian67
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
<select name= "perso4" size="1"
            onchange=" élément_à_modifier .style.fontSize =this.options[this.selectedIndex].text;" >

remarques :

    tu mets exemple.style...   ça ne marche pas comme ça,   il faut s'adresser à un élément
             document.name_formulaire_name_element...
                ou document.getElementById("id_element")...

    pourquoi dans le select mettre des value et des texte = ?   inutile non ?
                       <option>8pt</option>   par exemple, ça suffit ( si pas d'envoi vers un serveur ! )

    si size=1 sur un select, la 1ère ligne est sélectionnée par défaut.
       pour pouvoir sélectionner cette ligne, il faudra d'abord cliquer
             sur une autre !
      

<hr />                Cordialement            Bul        
Messages postés
1
Date d'inscription
lundi 22 décembre 2008
Statut
Membre
Dernière intervention
18 mai 2009

mon problem
je doute rempler les combobox (les option a traver la table promo[] module[] groupe[]) promo module et groupe merc

<html>


<head>
 <title>Untitled 1</title>
<script language="javascript">


promo[0]="3SI";
promo[1]="2ST";
Module[0][0]="Info3";
Module[0][1]="Math4";
Module[1][0]="Prolog";
Groupes[0][0]="G1";
Groupes[1][0]="G1";
Groupes[1][1]="G2";
Groupes[0][0]="G1";


function affecher()
{
 //j=document.selected.promo.options[promo].selectindex;
}
function promotion()
{
    size=1;
    select index=j
    promo[0];
    promo[1];
}
</script>
</head>




<form name="selected">


promo:
<select name="promo">


<option selected=" //---------// "> --------- </option>
<option value=" ">  </option>
</select>


Module:
<select name="Module" >


<option selected=" //---------// "> --------- </option>
<option value=" "> </option>
 onChange promotion();
</select>


Groupes:
<select name="Groupes" >


<option selected=" //---------// "> --------- </option>
<option value=" "> </option>
onChange Module();
</select>


Type:
<select>


<option selected="  "></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>Ex</option>
<option>Rat</option>


</select>


</form>




</html>