Lister des <input>

Lister des <input> - HTML/CSS - Programmation

Marsh Posté le 02-04-2007 à 10:05:01    

Bonjour,
 
je vous explique ce que je compte faire:
 
j'ai un formulaire dont l'ensemble des <input> sont répartis dans des <div>...
Des <div> pouvant eux-mêmes être présents dans des <div> (principe des poupées russes).
 
Grâce à la fonction suivante, je peux savoir combien de <input> sont présents dans mon <div> dont l'id est entré en paramêtre:

Citation :

var taille2 = nbr1 + document.getElementById(id).getElementsByTagName('input').length -2;


(nbr1 correspondant au numéro du premier <input> présent dans mon <div>... car le premier <input> de mon <div> n'est pas forcément le premier <input> de mon formulaire)
 
Mon problème c'est donc sa: j'ai besoin de savoir la chose suivante: Le premier <input> de chaque <div> est le combien-ième de mon formulaire ?
 
J'ai besoin de cette information afin de pouvoir réinitialiser tout les <input> présents dans un <div> lors de l'appel de ma fonction. Pour cela je fais la boucle suivante:
 

Citation :

for (i=nbr1-1; i<=taille2; i++){
  //Pour débugger:   document.write(formulaire.elements[i] + "<br>" );
  formulaire.elements[i].checked="";
  formulaire.elements[i].value="";  
  //Pour débugger:  window.alert ("123" );  
 }

 
(nbr1 étant le numéro du premier <input> à réinitialiser et taille2 étant le numéro du dernier <input> à réinitialiser.
taille2 étant l'addition du numéro de mon premier <input> + le nombre d' <input> présent dans mon <div> )
 
Tout fonctionne correctement, mais je souhaite simplifier ma fonction.
A l'heure actuelle, je dois numéroter l'ensemble de mes <input> et entrer deux paramêtres à ma fonction:
- l'id du <div>
- le numéro du premier <input> du <div> en question...
 
Je voudrais donc ne pas avoir à numéroter l'ensemble de mes <input> et ne pas avoir a rentrer le numéro du premier <input> de chaque <div> en paramêtre...
Ainsi ma fonction n'aura plus qu'un paramêtre: l'id du <div>
 
Ce que je veux savoir:
 
Il y a-t-il un moyen de connaitre le numéro du premier <input> de chacun de mon <div> ? Comment ?
Le cas échéant:
Est-il possible de faire en sorte de réinitialiser tous les <input> présent dans un <div> sans connaitre leur numéro et sans modifier les valeurs des autres <input> ? Comment ?
 
Mes compétences en javascript sont assez limitées, mais je suppose que ce que je cherche à faire est réalisable... Sin je me trompe, prévenez-moi...  :pt1cable:  
 
Merci d'avance.

Reply

Marsh Posté le 02-04-2007 à 10:05:01   

Reply

Marsh Posté le 02-04-2007 à 10:11:02    

Pour ceux que sa intéresse, voici mon code complet...  
Au cas où j'ai pas été clair dans mes explications, sa peut permettre de comprendre ce que je souhaite réaliser:
 
Ma page html et mon code javascript dans l'en-tête:

Citation :

<html>
<head>
<title>Test d'un formulaire</title>
 
<style type="text/css">
  @import url(formulaire.css);
</style>
 
<script language="javascript">
 
/* La fonction "counter" prend 2 paramêtres:
 - l'id du <div> suivant le checkbox appellant la fonction     (cet id étant composé d'une partie en lettres et d'une partie en chiffres, les deux étant séparée par un underscore)
 - l'id du premier <input> de ce <div>       (cet id étant composé uniquement d'un chiffre)    */
 
/* Lors de l'appel de la fonction, le premier paramêtre (id) doit être écrit entre guillemets simples, le second doit être écrit SANS guillements */
/* Les 2 paramêtres étant séparés par une virgule */
 
function Counter(id, nbr1){
 /* Lors du clic sur le checkbox, si le <div> est fermé, on l'ouvre et on lui donne une taille "auto"  */
 if (document.getElementById(id).style.display =='none'){
  document.getElementById(id).style.display='block'; document.getElementById(id).style.height='auto';
    }
 /* Sinon (si le <div> est ouvert), on le ferme et on lui attribue une taille nulle */
 else{
  document.getElementById(id).style.display='none'; document.getElementById(id).style.height='0';
 }
 /* variable "taille" determinant le nombre de <div> dans le <div> ayant l'id entré en paramêtre */
 var taille = document.getElementById(id).getElementsByTagName('div').length;
 /* variable "taille2" déterminant le numéro du dernier <input> présent dans le <div> ayant l'id entré en paramêtre */
 var taille2 = nbr1 + document.getElementById(id).getElementsByTagName('input').length -2;
 var i;  
 /* boucle permettant la réinitialisation des tous les <input> présent dans le <div> ayant l'id entré en paramêtre */
 /* Cela inclut les <input> présent dans des <div> inclus dans le <div> ayant l'id entré en paramêtre */
 for (i=nbr1-1; i<=taille2; i++){
  //Pour débugger:   document.write(formulaire.elements[i] + "<br>" );
  formulaire.elements[i].checked="";
  formulaire.elements[i].value="";  
  //Pour débugger:  window.alert ("123" );  
 }
 /* Découpage de l'id en 2 parties */
 var id_explode = id.split("_" );
 /* La partie "id_prefixe" correspondant à la partie en lettres de l'id */
 var id_prefixe = id_explode[0];
 /* La partie "id_suffixe" correspondant à la partie en chiffre de l'id */
 var id_suffixe = id_explode[1];
 id_suffixe = parseInt (id_suffixe);
 
 var j;
 var a=id_suffixe+1;
 var b=id_suffixe+taille;
 
 //Pour débugger:  window.alert ("j="+a+" j<="+b);
 
 /* Boucle permettant de faire en sorte que les <div> présent dans le <div> ayant l'id entré en paramêtre soient redéfinis comme "invisible" */
 for (j=id_suffixe+1; j<=id_suffixe+taille; j++){
  document.getElementById(id_prefixe + "_" + j).style.display='none';
  document.getElementById(id_prefixe + "_" + j).style.height='0';
 }
 
}
</script>
 
</head>
 
<body>
 
<h1> Mon Formulaire </h1>
 
<div class="visiblea">
 <form id="formulaire "name="formulaire" method="post" action="result.html">
 Vous avez une voiture:<INPUT id="1" type="checkbox" value="voiture" OnClick="Counter('invisiblea_1', 2);">
 
 <div id="invisiblea_1" style="display:none">
  Renault:<INPUT id="2" type="checkbox" value="renault"><br />
  Ford:<INPUT id="3" type="checkbox" value="ford"><br />
  Peugeot:<INPUT id="4" type="checkbox" value="peugeot"><br />
  Autres:<INPUT id="5" type="checkbox" value="autres" OnClick="Counter('invisiblea_2', 6);"><br />
   <div id="invisiblea_2" style="display:none">
    Ferrari:<INPUT id="6" type="checkbox" id="test" value="ferrari"><br />
    BMW:<INPUT id="7" type="checkbox" value="bmw"><br />
    Porsche:<INPUT id="8" type="checkbox" value="porsche" OnClick="Counter('invisiblea_3', 9);"><br />
     <div id="invisiblea_3" style="display:none">
      modele1:<INPUT id="9" type="checkbox" value="modele1"><br />
      modele2:<INPUT id="10" type="checkbox" value="modele2"><br />
      modele3:<INPUT id="11" type="checkbox" value="modele3"><br />
      Autre modele:<INPUT id="12" type="textarea" value=""><br />
     </div><br />
   </div><br />
 </div>
 
 <br />
 
</div>
 
<div class="visibleb">
 
 Voyage à l'étranger:<INPUT id="13" type="checkbox" value="voyage" OnClick="Counter('invisibleb_1', 14);">
 
 <div id="invisibleb_1" style="display:none">
  Italie:<INPUT id="14" type="checkbox" value="italie"><br />
  Irlande:<INPUT id="15" type="checkbox" value="irlande"><br />
  Angleterre:<INPUT id="16" type="checkbox" value="angleterre"><br />
  Autres:<INPUT id="17" type="checkbox" value="autres" OnClick="Counter('invisibleb_2', 18);"><br />
   <div id="invisibleb_2" style="display:none">
    Portugal:<INPUT id="18" type="checkbox" id="test" value="portugal"OnClick="Counter('invisibleb_3', 19);"><br />
     <div id="invisibleb_3" style="display:none">
      Lisbone:<INPUT id="19" type="checkbox" value="madrid"><br />
      Ville2:<INPUT id="20" type="checkbox" value="barcelone">
     </div>
    Etats-unis:<INPUT id="21" type="checkbox" value="usa"><br />
    Espagne:<INPUT id="22" type="checkbox" value="espagne" OnClick="Counter('invisibleb_4', 23);"><br />
     <div id="invisibleb_4" style="display:none">
      Madrid:<INPUT id="23" type="checkbox" value="madrid"><br />
      Barcelone:<INPUT id="24" type="checkbox" value="barcelone"><br />
      Valence:<INPUT id="25" type="checkbox" value="valence"><br />
      Autre ville:<INPUT id="26" type="textarea" value=""><br />
     </div><br />
   </div><br />
 </div><br />
 
</div>
 
 <div><br />
  <INPUT id="27" type="submit" value="envoyer" name="envoyer" align="center">
  </form>
 </div>
 
</body>
</html>


 
La feuille de style qui va avec:

Citation :

/****** feuille de style du formulaire ******/
 
body {
 
background-color: CC9933;
height: 100%;
width: 100%;
 
}
 
div.visiblea {
 
background-color: #CC9933;
color: black;
height: auto;
width:500px;
 
}
 
 
#invisiblea_1 {
 
margin-left: 40px;
background-color: #CC9966;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
#invisiblea_2 {
 
margin-left: 40px;
margin-right: 10px;
background-color: #CC9999;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
#invisiblea_3  {  /*faux*/
 
margin-left: 40px;
margin-right: 10px;
background-color: #CC99CC;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
div.visibleb {
 
background-color: #CC9933;
color: black;
height: auto;
width:500px;
 
}
 
#invisibleb_1 {
 
margin-left: 40px;
background-color: #CC9966;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
#invisibleb_2 {
 
margin-left: 40px;
margin-right: 10px;
background-color: #CC9999;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
#invisibleb_3  {
 
margin-left: 40px;
margin-right: 10px;
background-color: #CC99CC;
/*display:none;*/
/*visibility: hidden;*/
height: 0%;
 
}
 
#invisibleb_4 {
 
margin-left: 40px;
margin-right: 10px;
background-color: #CC99CC;
height: 0%;
 
}


 
 
Le formulaire étant évidemment juste un exemple de ce que je souhaite obtenir...


Message édité par jadorelescss38 le 02-04-2007 à 10:11:55
Reply

Marsh Posté le 02-04-2007 à 10:15:19    


note : j en'ai pas lu le code, je dis donc peut etre des conneries :D
Est-il possible de faire en sorte de réinitialiser tous les <input> présent dans un <div> sans connaitre leur numéro et sans modifier les valeurs des autres <input> ? Comment ?
 

Code :
  1. var t_input = document.getElementById('idDiv').getElementsByTagName('input');
  2. for (var i = 0 ; i < t_input.length ; i ++)
  3.     t_input[i].value = 0 ;

Message cité 1 fois
Reply

Marsh Posté le 02-04-2007 à 10:18:12    

Je vais essayer ce que tu me dis... sa pourrais le faire...

Reply

Marsh Posté le 02-04-2007 à 10:46:54    

Ta solution me convient parfaitement !!!
Le seul petit truc c'est que idDiv ne doit pas être placé entre guillement dans le

Citation :

document.getElementById(idDiv)

Sinon c'est parfait, j'obtient exactement ce que je voulais...
 
Je te remercie beaucoup pour ton aide... Avec mon niveau en javascript j'aurai galéré encore un bon moment..

Reply

Marsh Posté le 02-04-2007 à 10:58:02    

entre guillemet : tu cherche le div qui  à  pour identifiant idDiv
 
sans guillement : tu cherche le div qui  à  pour identifiant le contenu de la variable  idDiv

Reply

Marsh Posté le 13-11-2007 à 11:42:40    

flo850 a écrit :


note : j en'ai pas lu le code, je dis donc peut etre des conneries :D
Est-il possible de faire en sorte de réinitialiser tous les <input> présent dans un <div> sans connaitre leur numéro et sans modifier les valeurs des autres <input> ? Comment ?
 

Code :
  1. var t_input = document.getElementById('idDiv').getElementsByTagName('input');
  2. for (var i = 0 ; i < t_input.length ; i ++)
  3.     t_input.value = 0 ;



 
Bonjour,
Je suis un petit nouveau sur ce forum et également un petit nouveau en HTML,JAVAscript, JAVA et autre.
J'ai exactement le même type de fonction à faire que jadorelescss38 et j'ai donc intégré le morceau de code proposé, mais sans succès.

Code :
  1. <!DOCTYPE html PUBLIC "">
  2. <html>
  3.   <head>
  4.     <meta name="generator" content="HTML Tidy, see www.w3.org">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  6.     <title>TPGM</title>
  7.     <link rel="stylesheet" href="/OGD/css/default.css" type="text/css">
  8.     <link rel="stylesheet" href="/OGD/css/EADS.css" type="text/css">
  9.     <link rel="stylesheet" href="/OGD/css/training.css" type="text/css">
  10.     <link rel="stylesheet" href="/OGD/css/actus.css" type="text/css">
  11.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m1.css" type="text/css">
  12.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m2.css" type="text/css">
  13.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m3.css" type="text/css">
  14.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m4.css" type="text/css">
  15.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m5.css" type="text/css">
  16.     <link rel="stylesheet" href="/OGD/css/sX_Menu_m6.css" type="text/css">
  17.     <link rel="stylesheet" href="/OGD/css/print.css" type="text/css" media="print">
  18.   </head>
  20.   <SCRIPT LANGUAGE="javascript" type=text/javascript>
  21.     function cache(element)
  22.     {
  23.       element.style.visibility="hidden";
  24.       var t_input = document.getElementById(element).getElementsByTagName('input');
  25.       for (var i = 0 ; i < t_input.length ; i ++)
  26.       {
  27.         t_input[i].value = false ;
  28.       }
  29.     }
  31.     function montre(element)
  32.     {
  33.       element.style.visibility="visible";
  34.     }
  35.   </SCRIPT>
  37.   <body onload="cache(lignes)">
  38.     <table>
  39.       <tr>
  40.         <td>
  41.           <input type="radio" name="type" value="1" OnClick="cache(lignes)" checked>Complete<br>
  42.           <input type="radio" name="type" value="2" OnClick="montre(lignes)">Major<br>
  43.           <input type="radio" name="type" value="3" OnClick="cache(lignes)">Minor
  44.         </td>
  45.         <td>
  46.           <div id="lignes">
  47. <input type="radio" name="ligne" value="1">>50 rows<br>
  48. <input type="radio" name="ligne" value="2"><50 rows
  49.           </div>
  50.         </td>
  51.       </tr>
  52.     </table>
  53.   </body>
  54. </html>


Mais j'ai une erreur sur l'instruction [i]var t_input = document.getElementById(element).getElementsByTagName('input'); : Erreur : 'document.getElementById(...)' a la valeur null ou n'est pas un objet. :fou:  
Et bien entendu, la valeur de mes 2 boutons radio n'est pas réinitialisée (que la valeur retournée par l'id "lignes" soit égale à null ou rien s'il est masqué).
 
Merci d'avance pour votre aide.

Reply

Marsh Posté le 13-11-2007 à 11:59:04    

montre('lignes') et cache('lignes')
 
c'était expliqué dans le post de flo850 juste au dessus du tien :/


Message édité par anapajari le 13-11-2007 à 11:59:52
Reply

Marsh Posté le 13-11-2007 à 12:02:10    

dans ton onload, tu as "onload="cache(lignes)", et c koi 'lignes' :??:

 

et d'ailleurs tu passes en param le fameux "lignes" alors que c meme pas initialisé ? si tu fais un getElementById dessus, vu qu'il est null c clair qu'il va te retourner que dalle :/

 

EDIT:
si ton "lignes" c l'element <div id="lignes">, alors tu devrais faire un getElementById avant... et le passer en tant que chaine ;)


Message édité par SICKofitALL le 13-11-2007 à 12:51:54

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 13-11-2007 à 13:57:50    

Effectivement, avec les guillemets ça marche beaucoup mieux. Je l'avais compris pour le GetElementById, mais pas pour le reste.
J'ai juste eu à corriger le reste de mon code, mais c'est nickel maintenant.
 
Merci à tous.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed