Generer des input apartir d'un champs select

Résolu
cs_daris Messages postés 49 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 17 février 2009 - 9 déc. 2008 à 17:30
cs_daris Messages postés 49 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 17 février 2009 - 10 déc. 2008 à 14:04
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 11" />
<meta name="Originator" content="Microsoft Word 11" />
<link rel="File-List" href="file:///C:%5CDOCUME%7E1%5Ckoyao%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml" />
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;
mso-header-margin:36.0pt;
mso-footer-margin:36.0pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Tableau Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->

Bonjour,





J'ai un
formulaire comme suit et je voudrai faire une gestion dynamique avec javascript
mais pas évident pour moi.






 






<tr><td
nowrap="nowrap">Nombre de fraction:</td>






         <td nowrap="nowrap">






                 <select
name="nb_fractions" 
onChange="ajout_form(formulaire);"/>




                             <option
value="" ></option>






                             <option
value="1" >1 - Fraction</option>






                             <option value="2"
>2 - Fraction</option>






                             <option
value="4" >4 - Fraction</option>






                 
</select></td></tr>






 






En effet,
je voudrai que a chaque fois l'utilisateur 
sélectionne une option, exemple option 2-Fraction que le script  génère automatiquement  deux lignes de champs de saisie.


Ayant un niveau null en javascript j'ai ecrit la function imcomplète ci dessous pour traiter le formulaire ci dessus.


Si vous avez des idées pour me donner un coups de pousse.


Merci d'avance




 




function ajout_form(formulaire) {
    
    var lavaleur= formulaire.nb_fractions.selectedIndex;
    if(lavaleur = =1){
        //alert("La valeur de l\'élément " + (formulaire.nb_fractions.selectedIndex ));
        var text = '<tr><td nowrap="nowrap">Seuil superieur:</td><td>     </td><td nowrap="nowrap">seul_inferieur :</td><td></td><td nowrap="nowrap">Valeur :</td><td></td></tr>
';
       
    }
    if(lavaleur = =2){
       var text = '<tr><td nowrap="nowrap">Seuil
superieur:</td><td>     </td><td
nowrap="nowrap">seul_inferieur :</td><td></td><td
nowrap="nowrap">Valeur :</td><td></td></tr>
';
var text = '<tr><td nowrap="nowrap">Seuil
superieur:</td><td>     </td><td
nowrap="nowrap">seul_inferieur :</td><td></td><td
nowrap="nowrap">Valeur :</td><td></td></tr>
';
    }
    if(lavaleur = = 3){
         var text = '<tr><td nowrap="nowrap">Seuil
superieur:</td><td>     </td><td
nowrap="nowrap">seul_inferieur :</td><td></td><td
nowrap="nowrap">Valeur :</td><td></td></tr>
';

var text = '<tr><td nowrap="nowrap">Seuil
superieur:</td><td>     </td><td
nowrap="nowrap">seul_inferieur :</td><td></td><td
nowrap="nowrap">Valeur :</td><td></td></tr>
'
var text = '<tr><td nowrap="nowrap">Seuil
superieur:</td><td>     </td><td
nowrap="nowrap">seul_inferieur :</td><td></td><td
nowrap="nowrap">Valeur :</td><td></td></tr>
'
    }
  
   
}

8 réponses

cs_daris Messages postés 49 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 17 février 2009
10 déc. 2008 à 14:04
C'est super ! avec le document.getElementById("id_de_balise"), j'obtiens bien ce que je voulais.
Je te remercie de m'avoir accompagner.
3
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 déc. 2008 à 11:25
bonjour,
>>...génère...deux lignes de champs de saisie...
soit document.createElement balise voulue + conteneur.appendChild
soit conteneur.innerHTML+= balise voulue
@+
0
cs_daris Messages postés 49 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 17 février 2009
10 déc. 2008 à 12:05
Ok.
J'ai défini mes balises HTML dans la variable var text.
Je voudrai afficher le contenu de var text aussi tot après le select dans mon formulaire.
Je ne vois pas exactement ce qu'il faut mettre dans conteneur.
J'ai essayé:  

 formulaire.nb_fractions.value.innerHTML+= text;

Mais ça ne marche pas.
0
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 déc. 2008 à 12:19
>>formulaire.nb_fractions.value.innerHTML+= text;

c'est quoi formulaire ? un <form>
alors fais donc formulaire.innerHTML+"";
par balise j' entend celles que tu veux, et j'en met 2, comme tu en voulais 2...
( mais penser aux suppressions peut-être ... )

         [mon Site] [M'écrire] Bul         
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 déc. 2008 à 12:21
>>Mais ça ne marche pas.
et ça  ! ça aide drôlement pour aider !
qu'est-ce qui ne fonctionne pas ?
comment tu fais ce que tu dis ?
il y a un message d'erreur ?

et quand on met au point :
Chrome
, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----
FireFox
, Outils / Console d'erreurs
et mieux : télécharger mon Site][M'écrire]Bul
0
cs_daris Messages postés 49 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 17 février 2009
10 déc. 2008 à 13:33
Je m'explique:
<HTML>
<HEAD>
<script language= javascript>

                  function ajout_form(formulaire) {
                       var lavaleur = formulaire.nb_fractions.value;
                       if(lavaleur = =2){
                            var text = '

';

                             formulaire.innerHTML+ = text;
                       }
                  }
</script>

</HEAD>

<form name="formulaire">

    <tr><td nowrap="nowrap">Nombre de fraction:</td>

         <td nowrap="nowrap">

                 <select name="nb_fractions"  onChange="ajout_form(formulaire);"/>

                             <option value="" ></option>

                             <option value="1" >1 - Fraction</option>

                             <option value="2" >2 - Fraction</option>

                             <option value="4" >4 - Fraction</option>

                  </select></td></tr>
</form>
<HTML>

Quand je lance OnChange sur les listes du champs  select, je voudrai que soit générer dans le même formulaire et en dessous du champ select des balises inputs.
Sauf qu'avec mon script ci-dessu les deux balises input sont generées dans une nouvelle fenêtre(nouveau formulaire).
0
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 déc. 2008 à 13:54
en fait, tu n'es pas très loin, mais :
tu essayes d'inventer des "syntaxes" qui n'existent pas....
tu as des erreurs y compris en html
tu ajoutes "balise>", alors :
soit ça va planter ( le html ne connias pas ! )
soit tu ne verras rien !
quand je disais c'était "générique", il faut mettre la balise que tu veux !
et pas balise... qui n'existe pas !
et appeler un élément, une balise directement par son name, ça ne fonctionnera qu'avec IE
document.name_de_balise ( uniquement pour un form ) ou document.getElementById("id_de_balise")
en minuscule, c'est un exemple ! il faut mettre le vrai name ou id !
          [mon Site] [M'écrire] Bul         
0
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 déc. 2008 à 14:02
et si tu veux des erreurs html
( en dehors de que tu ajoutes et qui va planter ! )
/ en fin de balise select
pas de .....
          [mon Site] [M'écrire] Bul         
0
Rejoignez-nous