GetElementById

GetElementById - HTML/CSS - Programmation

Marsh Posté le 23-11-2005 à 20:51:26    

Bonjour à tous,
 
Voilà, je suis confronté au ""célèbre"" problème du cochage de plusieurs checkbox.
Aussi, chaque checkbox est composé ainsi :
 

Code :
  1. <input type='checkbox' value='4' id='case[]'>
  2. <input type='checkbox' value='3' id='case[]'>
  3. <input type='checkbox' value='6' id='case[]'>
  4. <input type='checkbox' value='8' id='case[]'>


 
J'ai un bouton Valider qui est du type

Code :
  1. <input type="button" onclick="conf()" value="Valider">


 
Et voici ma fonction JS

Code :
  1. function conf()
  2. {
  3. var cbs = document.getElementById('case[]').value;
  4. var trouve = "false";
  5. for (var i=0; i < cbs.length; i++)
  6. {
  7.  if(cbs[i].checked)
  8.  {
  9.   var trouve="true";
  10.  }
  11. }
  12. if(trouve=="true" )
  13. {
  14.  if(confirm('Voulez-vous réellement supprimer ?'))
  15.  {
  16.      suppression.submit();
  17.  }
  18. }
  19.  else
  20. {
  21.  alert('Selectionnez une case au moins.');
  22. }
  24. }
  25. </script>


 
Mais impossible de retourner les valeurs des case[]
Avec un getelementsByName ca marche nickel, mais avec un id, ca passe pas...
 
Quelqu'un voit le problème ?
Merci d'avance

Message cité 1 fois
Reply

Marsh Posté le 23-11-2005 à 20:51:26   

Reply

Marsh Posté le 23-11-2005 à 21:06:56    

getElementById comme son nom l'indique renvoi [b]UN[b] élémént par rapport à un id donné.
 
il ne va pas te retourner un tableau, sachant en plus qu'un id c'est unique dans une page, tu va avoir du mal à gerer ton truc, alors il y a pllusieurs méthodes simples
 
la première, identifier chaque élément pas un id numéroté
id="cb1", id="cb2", id="cb3"....
 
et en JS, tu parcours tes checkbox avec un for en te basant sur un idmax

Code :
  1. for i jusqu'à idmax
  2. {
  3. macheckbox = document.getElementById("cb"+i);
  4. }


 
sinon tu peux encadrer toutes tes checkbox par un div ou un fieldset
 

Code :
  1. <fieldset id="mescheckbox">
  2. <input type='checkbox' value='4'>
  3. <input type='checkbox' value='3'>
  4. <input type='checkbox' value='6'>
  5. <input type='checkbox' value='8'>
  6. </fieldset>


 
puis tu récupère ton fieldset et ensuite tu récupère tous les inputs de ce fieldset qui en principe sont des checkbox
 

Code :
  1. var maboiteAcheckbox = document.getElementById("mescheckbox" );
  2. var toutesmescheckbox = maboiteAcheckbox.getElementsByTagName("INPUT" );
  3. for (var i=0; i<toutesmescheckbox.length;i++) {
  4.   action sur toutesmescheckbox[i]....
  5. }


 
getElementsByName est en principe une méthode vouée à disparaître,
un id c'est unique dans une page
getElementsByTagName renvoi un tableau d'éléments contenus dans un élément, exemple, on a renvoyé tous les INPUT contenus dans le fieldset
tu peux remplacer ton div par un fieldset si tu en as envie


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 23-11-2005 à 21:09:39    


1- Cet ID est invalide
2- Un ID est un identificateur unique pour un élément unique d'une page


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-11-2005 à 21:18:23    

masklinn grilled


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 24-11-2005 à 11:03:08    

LOL et merde !
C'est tellement logique que j'ai complètement zappé l'unicité de l'ID. Merci de l'avoir souligner :)
 
Ceci dit j'ai toujours aucune réaction lors de la vérification...
Voilà le code modifié.

Code :
  1. <fieldset id="case">
  2. <input type='checkbox' value='55'>
  3. <input type='checkbox' value='27'>
  4. </fieldset>
  7. Fonction Javascript
  8. function conf()
  9. {
  10. var tmp = document.getElementById("case" );
  11. var cbs = tmp.getElementsByTagName("INPUT" );
  12. for (var i=0; i < cbs.lenght; i++)
  13. {
  14.  alert(cbs[i]);
  15. }
  16. }


DOnc quand j'appuie sur le bouton Valider, l'alert se déclenche meme pas.
Je m'attendais même pas à avoir un contenu valid, mais simplement une alert, et bien même pas.
Donc en toute logique, le cbs.lenght = 0 pour pas entrer dans la boucle.
Maintenant je comprends pas pourquoi il n'y a aucun paramètre de rentrer dans le cbs lol !
 
Ah vi, et au passage, je compte récupérer la variable dans un traitement derrière... Mon Form est en POST.. je la récupère donc dans $_POST['case']  et ensuite par une boucle qui fera le un traitement basique "n" fois, le n défini par un i< count($_POST['case']) ?
Bon ca c'est pour après hein :)
 
Merci encore.

Reply

Marsh Posté le 24-11-2005 à 11:57:24    

tu as regardé ce que te donne la console javascript de Firefox ?
car à mon avis tu as un problème dans le code JS global de ta page
 
et puis une bonne fois pour tout, utilise plutôt des double quotes pour les valeurs (" " ) au lieu des simples quote (' '). ca evitera des petits soucis
 et en PHP les strings tu les entoures avec des simple quotes.
 
et au passage je me rappelle po t'avoir dir lenght mais je t'avais dit length.
 
tu mérites le fouet !
 


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 24-11-2005 à 12:32:06    

Code :
  1. <fieldset id="case">
  2.      <input type="checkbox" value="55">
  3.      <input type="checkbox" value="27">
  4.      </fieldset>
  5.    
  6.    
  7.      Fonction Javascript
  8.      function conf()
  9.      {
  10.          var tmp = document.getElementById("case" );
  11.          var cbs = tmp.getElementsByTagName("INPUT" );
  12.          for (var i=0; i < cbs.length; i++)
  13.          {
  14.              alert(cbs[i]);
  15.          }
  16.      }


 
Ayé :)
Ranges ton fouet stp lol
 
Bon concernant la console JS de FF, elle est vide :)
Aucune erreur, messages, avertissements.


Message édité par Profil supprimé le 24-11-2005 à 12:33:58
Reply

Marsh Posté le 24-11-2005 à 13:10:55    

là ca marche en mettant tout le code dans une page
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script>
  7.      function conf()
  8.      {
  9.          var tmp = document.getElementById("case" );
  10.          var cbs = tmp.getElementsByTagName("INPUT" );
  11.          for (var i=0; i < cbs.length; i++)
  12.          {
  13.              alert(cbs[i]);
  14.          }
  15.      }
  18. </script>
  19. </head>
  21. <body>
  22. <fieldset id="case">
  23.      <input type="checkbox" value="55">
  24.      <input type="checkbox" value="27">
  25.      </fieldset>
  26. <input type="button" value="test" onclick="conf()">
  28. </body>
  29. </html>


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 24-11-2005 à 18:13:46    

Ah yes c'est bon .
Alors en fait le fieldset, faut bien faire attention de pas le faire entourer un "<tr><td><input value="14" type="checkbox"></td></tr>"   :D
Donc je l'ai mis entourant tout mon tableau.
 
Ah vi et j'ai rajouté un ".value" après alert('cbs[i]') pour que ca affiche la valeur ;)
 
Malheureusement le cbs.length est indéfini... ou plutot si, c'est la somme de tous mes éléments ( là c'est 5 : 4 checkbox et un bouton Supprimer)... je vois pas comment récupérer seulement les checkbox.


Message édité par Profil supprimé le 24-11-2005 à 18:18:46
Reply

Marsh Posté le 24-11-2005 à 18:28:16    

t1 c koi ce code bordelique
 
le fieldset c'est un élément qui permet d'englober des éléments de formulaires !!!
autant le remplacer par un DIV
et encore mieux evite de me faire cette merde de tabelau steuplé, fais quelque chose de propre
 
jtai déjà dis que le fieldset 'ou plutot utilise DIV
ne doit englober que les checkbox pour ton boulot là
 
sinon pour récuperer que les checkbox, tu fait un length-1 puisque le 5eme élément est le submit (donc tableaudecheckbox[4]
donc dans le for il faut faire un i<tableaudecheckbox.length-1
 
mais bon j'ai po envie de voir le code HTML et JS de ta page, ca doit pas être très joli à voir

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 24-11-2005 à 18:28:16   

Reply

Marsh Posté le 24-11-2005 à 18:52:35    

gatsusat a écrit :


jtai déjà dis que le fieldset 'ou plutot utilise DIV
ne doit englober que les checkbox pour ton boulot là


Non tu n'as jamais dit que le field ne devait entourer QUE des elements de formulaires.
Au mieux, t'as sorti ça  
[quotemsg="1252498,10,68526"]sinon tu peux encadrer toutes tes checkbox par un div ou un fieldset [/quotemsg]
Quel personne non qualifiée comme moi peut sous-entendre qu'il ne doit y'avoir QUE des checkbox  ?
 
J'ai un tableau avec dedans une boucle PHP qui génère des lignes <tr>... A chaque ligne une checkbox.
Je ne pensais pas que cela pouvait gênait en quoi que ce soit la récupération des values. C'est en bidouillant que j'ai trouvé.
 

gatsusat a écrit :


mais bon j'ai po envie de voir le code HTML et JS de ta page, ca doit pas être très joli à voir


Peut-être que des explications propres le tout amené avec un peu de pédagogie permettrait de voir moins de pages avec un code sale.


Message édité par Profil supprimé le 24-11-2005 à 18:53:32
Reply

Sujets relatifs:

Leave a Replay

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