formulaires html dynamiques

Je travaille sur la forme dynamique. J'ai un bouton radio, si un utilisateur sélectionne un bouton radio, je veux remplir un menu déroulant basé sur les valeurs des boutons radio.formulaires html dynamiques

par ex. si la valeur du bouton radio = valeur1 affiche le menu déroulant de 3 éléments (pomme, banane, mangue)

par ex. si la valeur du bouton radio = valeur2 affiche le menu déroulant de 5 éléments (pomme, banane, mangue, abricot, ornement)

etc. J'ai utilisé css pour masquer et afficher le menu déroulant.

(1) le problème que j'ai est, cela ne fonctionne pas quand j'insère mon formulaire dans un <table></table>; quand je retire les étiquettes de table cela fonctionne. est un peu étrange ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
<!-- 

function changeDiv(the_div,the_change) 
{ 
    var the_style = getStyleObject(the_div); 
    if (the_style != false) 
    { 
    the_style.display = the_change; 
    } 
} 

function hideAll() 
{ 
    changeDiv("main_category","none"); 
    changeDiv("another_category","none"); 
    changeDiv("other_category","none"); 
} 

function getStyleObject(objectId) { 
    if (document.getElementById && document.getElementById(objectId)) { 
    return document.getElementById(objectId).style; 
    } else if (document.all && document.all(objectId)) { 
    return document.all(objectId).style; 
    } else { 
    return false; 
    } 
} 
// --> 
</script> 
</head> 

<body> 
<table> 

<tr> 
    <td align="right" valign="top">Main Category:</td> 
    <td> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value1">value1<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value2">value2<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value3">value3<br /> 
    <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value4">value4 
    </td> 
</tr> 


<div id="main_category" style="margin-left:30px;display:none"> 
<tr> 
    <td align="right">Options:</td> 
    <td></td> 
</tr> 
</div> 

<tr> 
    <td align="right">Aanother Category:</td> 
    <td> 
    <input type="radio" name="another_cat" onClick="hideAll(); changeDiv('another_category','block');" value="Yes">Yes 
    <input type="radio" name="another_cat" value="No">No 
    </td> 
</tr> 


<div id="another_category" style="margin-left:30px;display:none;"> 
<tr> 
    <td align="right">Other Category:</td> 
    <td> 

    </td> 
</tr> 

<tr> 
    <td align="right">Interest:</td> 
    <td> 

    </td> 
</tr> 
</div> 





</table> 
</body> 
</html>

(2) deuxième question est, j'ai une deuxième boutons radio comme ceci: par exemple. si la valeur du bouton radio = valeur1 affiche le menu déroulant de 3 éléments (pomme, banane, mangue) par ex. si la valeur du bouton radio = valeur2 affiche le menu déroulant de 5 éléments (pomme, banane, mangue, abricot, ornage) etc. J'ai utilisé css pour masquer et afficher le menu déroulant.

maintenant l'affaire est, si je l'ai déjà choisi la valeur = valeur1, je ne veux pas montrer valeur1 à nouveau dans le deuxième bouton radio

toute aide/suggestions sont grandement appréciés.

Source

2010-09-16 NULL

i inséré un code ici, mais il ne montre pas, quelle est la syntaxe pour insérer un code? – NULL

Utilisez au moins quatre espaces avant le texte de chaque ligne de votre zone de code et assurez-vous qu'il y a une ligne vide avant et après votre bloc de code. StackOverflow s'occupera du reste. – StriplingWarrior

Pour insérer facilement du code, vous pouvez simplement le coller, le sélectionner, puis appuyer sur le bouton '101010', ce qui indentera automatiquement 4 espaces comme le suggère StriplingWarrior. –

essayer cette

<html> 
    <head> 
     <script type="text/javascript"> 
        var comList= new Array("apple","banana","mango"); 
        var list = new Array("orage", "apricot"); 
        var val1selected = 0; 

      function loadDropDown(option){ 
         setSelectdVal(option) 
         createDropDown(option) 
        } 
       function setSelectdVal(option){ 
         if (option == 1){ 
          val1selected = 1; 
         } 
        }  

        function createDropDown(option){ 
         html = ""; 
         html = html + '<select id="id">' 
         var arr = getArray(option); 
         for (var i=arr.length-1; i>=0; --i){ 
          html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
         } 
         html = html + '</select>' 
         document.getElementById('selectTag').innerHTML = html; 
      } 
        function getArray(option){ 
         var a = comList; 
         if ((option == 2) && (val1selected == 0)){ 
          a = comList.concat(list) 
         } 
         return a; 
        } 

       </script> 
    </head> 
     <body> 
     <table> 
        <tr> 
         <td><input type="radio" name="options" onClick=loadDropDown(1);>value1</td> 
         <td><input type="radio" name="options" onClick=loadDropDown(2);>value2</td> 
        </tr> 
      <tr> 
         <td></td> 
         <td id="selectTag"></td> 
        </tr> 
       </table> 
     </body> 
</html>

Source

2010-09-17 06:51:54 sameera207

parfait! Merci de votre aide – NULL

Je vous suggère de jeter un oeil à quelques frameworks Javascript qui vous faciliteront la vie. Jetez un oeil à ExtJS: http://www.sencha.com/products/js/ ou jQuery: http://jquery.com/ ces cadres peuvent gérer vos problèmes avec facilité.

Source

2010-09-16 19:54:00 sdavids

merci, en fait, j'ai un code que j'ai ajouté à mon message, mais d'une manière ou d'une autre, il n'est pas affiché. – NULL

formulaires html dynamiques

Répondre

Questions connexes