Generer des input apartir d'un champs select [Résolu]

Signaler
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009
-
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009
-
<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

Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

C'est super ! avec le document.getElementById("id_de_balise"), j'obtiens bien ce que je voulais.
Je te remercie de m'avoir accompagner.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
bonjour,
>>...génère...deux lignes de champs de saisie...
soit document.createElement balise voulue + conteneur.appendChild
soit conteneur.innerHTML+= balise voulue
@+
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

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.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>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         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>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
Messages postés
49
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
17 février 2009

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).
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
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         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
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