[Résolu] Javascript qui plante

Javascript qui plante [Résolu] - HTML/CSS - Programmation

Marsh Posté le 22-04-2005 à 18:06:11    

Je n'arrive pas à comprendre ce qui ne marche pas ?
 
C'est un script de vérification de formualaire qui permet de choisir les colonnes à imprimer d'une liste d'adhérents. Les 2 premiers tests se font sans rpoblèmes, mais les autres ne passent pas ?
 

Code :
  1. function valider(){
  3. if(document.imprimerFormulaire.nom.checked == false ){
  4.  alert("Vous ne pouvez supprimer le nom" );
  5.  return false;
  6. }
  8. if(document.imprimerFormulaire.prenom.checked == false ){
  9.  alert("Vous ne pouvez supprimer le prénom" );
  10.  return false;
  11. }
  13. var compteur = 54;
  15. if(document.imprimerFormulaire.unite.checked == true ){
  16.  compteur = compteur + 35;
  17. }
  19. if(document.imprimerFormulaire.numad.checked == true ){
  20.  compteur = compteur + 13;
  21. }
  23. if(document.imprimerFormulaire.naissance.checked == true ){
  24.  compteur = compteur + 27;
  25. }
  27. if(document.imprimerFormulaire.age.checked == true ){
  28.  compteur = compteur + 11;
  29. }
  31. if(document.imprimerFormulaire.adresse.checked == true ){
  32.  compteur = compteur + 101;
  33. }
  35. if(document.imprimerFormulaire.tel1.checked == true ){
  36.  compteur = compteur + 21;
  37. }
  39. if(document.imprimerFormulaire.tel2.checked == true ){
  40.  compteur = compteur + 21;
  41. }
  43. if(document.imprimerFormulaire.email.checked == true ){
  44.  compteur = compteur + 41;
  45. }
  47. var mode = document.imprimerFormulaire.mode.value;
  49. if (mode == "portrait" && compteur > 171) {
  50.  alert ("Vous avez sélectionné trop d'information. Passez en paysage" );
  51.  return false;
  52. }
  54. if (mode == "paysage" && compteur > 258) {
  55.  alert ("Vous avez sélectionné trop d'information." );
  56.  return false;
  57. }


 
Il s'agit de checkbox qui si elles sont cochées permettront l'impression de la colonne correspondante. Le compteur permet de limiter le nombre en fonction de la largeur de la page.
Le mode est un bouton radio qui permet de choisir entre portrait et paysage
 
Pour info, la page PHP qui gère tout ça fonctionne très bien : c'est donc juste le Javascript qui foire
 
Merci


Message édité par bepimaco le 24-04-2005 à 09:28:37

---------------
Bepimaco
Reply

Marsh Posté le 22-04-2005 à 18:06:11   

Reply

Marsh Posté le 22-04-2005 à 18:57:26    

La totalité de la page :
 

Code :
  1. <!-- Insertion du fichier contenant l'entête de la page
  2. Ne pas oublier de remplir les champs titre et description-->
  3. <?php
  4. $titre="Procédure d'impression - [&eacute;tape 1/2]";
  5. $base = "liste";
  6. include '../inclus-entetebdd.php';
  7. ?>
  8. <script language="JavaScript">
  9. <!--
  10. function valider(){
  12. if(document.imprimerFormulaire.nom.checked == false){
  13.  alert("Vous ne pouvez supprimer le nom" );
  14.  return false;
  15. }
  17. if(document.imprimerFormulaire.prenom.checked == false){
  18.  alert("Vous ne pouvez supprimer le prénom" );
  19.  return false;
  20. }
  22. var compteur = 54;
  24. if(document.imprimerFormulaire.unite.checked == true){
  25.  compteur = compteur + 35;
  26. }
  28. if(document.imprimerFormulaire.numad.checked == true){
  29.  compteur = compteur + 13;
  30. }
  32. if(document.imprimerFormulaire.naissance.checked == true){
  33.  compteur = compteur + 27;
  34. }
  36. if(document.imprimerFormulaire.age.checked == true){
  37.  compteur = compteur + 11;
  38. }
  40. if(document.imprimerFormulaire.adresse.checked == true){
  41.  compteur = compteur + 101;
  42. }
  44. if(document.imprimerFormulaire.tel1.checked == true){
  45.  compteur = compteur + 21;
  46. }
  48. if(document.imprimerFormulaire.tel2.checked == true){
  49.  compteur = compteur + 21;
  50. }
  52. if(document.imprimerFormulaire.email.checked == true){
  53.  compteur = compteur + 41;
  54. }
  56. var mode = document.imprimerFormulaire.mode.value;
  58. if (mode=="portrait" && compteur>171) {
  59.  alert ("Vous avez sélectionné trop d'information. Passez en paysage" );
  60.  return false;
  61. }
  63. if (mode=="paysage" && compteur>258) {
  64.  alert ("Vous avez sélectionné trop d'information." );
  65.  return false;
  66. }
  69. if(document.imprimerFormulaire.mode.value == "paysage" ){
  70.  alert("Lors de l'impression, sélectionnez paysage" );
  71.  return false;
  72. }
  74. }
  75. // -->
  76. </script>
  77. <style type="text/css">
  78. h1 {
  79.  text-align: center;
  80.  color: black;
  81.  z-index: 3;
  82.  font-size: 2em;
  83.  margin: 0;
  84.  padding: 0;
  85. }
  86. table {
  87.  text-align: left;
  88.  font-family: arial, helvetica, verdana, sans-serif;
  89.  background-color : transparent;
  90.  margin-top: 10px;
  91.  margin-left: 10px;
  92. }
  93. #ajout1{
  94.  position: absolute;
  95.  margin-top: 150px;
  96.  width: 554px;
  97.  left: 50%;
  98.  margin-left: -277px;
  99. }
  100. #ajout2{
  101.  position: absolute;
  102.  text-align: center;
  103.  background-image: url('../../styles/bdd/images/ecran-chapeau.gif');
  104.  width: 554px;
  105.  height: 43px;
  106. }
  107. #ajout3{
  108.  position: absolute;
  109.  margin-top: 43px;
  110.  background-image: url('../../styles/bdd/images/ecran-titre.gif');
  111.  width: 554px;
  112.  height: 43px;
  113.  color: black;
  114.  z-index: 2;
  115. }
  116. .ajout4{
  117.  position: absolute;
  118.  margin-top: 86px;
  119.  background-image: url('../../styles/bdd/images/ecran-corps.gif');
  120.  width: 554px;
  121.  height: 339px;
  122. }
  123. #ajout5{
  124.  position: absolute;
  125.  background-image: url('../../styles/bdd/images/ecran-action.gif');
  126.  width: 554px;
  127.  height: 43px;
  128.  margin: 0;
  129.  padding: 0;
  130.  z-index: 2;
  131. }
  132. #ajout6{
  133.  position: absolute;
  134.  margin-top: 431px;
  135.  background-image: url('../../styles/bdd/images/ecran-base.gif');
  136.  width: 554px;
  137.  height: 48px;
  138.  z-index: 1;
  139. }
  140. select{
  141.  background: #cccccc;
  142.  border: solid black 1px;
  143. }
  144. textarea{
  145.  background: transparent;
  146.  border: solid black 1px;
  147. }
  148. </style>
  149. </head>
  151. <?php
  152. include '../inclus-ambiancebdd.php';
  153. ?>
  155. <!-- Contenu de la page -->
  156. <div id="ajout1">
  157. <div id="ajout2"></div>
  158. <div id="ajout3">
  159.     <h1>Impression s&eacute;lective</h1>
  160. </div>
  161. <div class="ajout4">
  162. <form action="adherents-imprimer2.php" method="post" name="imprimerFormulaire" onSubmit="return valider()">
  163.  <table>
  164.   <tr>
  165.    <td><input name="nom" type="checkbox" value="nom" checked="checked"></td>
  166.    <td>Nom</td>
  167.   </tr>
  168.   <tr>
  169.    <td><input name="prenom" type="checkbox" value="prenom" checked="checked"></td>
  170.    <td>Pr&eacute;nom</td>
  171.   </tr>
  172.   <tr>
  173.    <td><input name="unite" type="checkbox" value="unite"></td>
  174.    <td>Unit&eacute;</td>
  175.   </tr>
  176.   <tr>
  177.    <td><input name="numad" type="checkbox" value="numad"></td>
  178.    <td>Num&eacute;ro d'adh&eacute;rent</td>
  179.   </tr>
  180.   <tr>
  181.    <td><input name="naissance" type="checkbox" value="naissance"></td>
  182.    <td>Date de naissance</td>
  183.   </tr>
  184.   <tr>
  185.    <td><input name="age" type="checkbox" value="age"></td>
  186.    <td>Age</td>
  187.   </tr>
  188.   <tr>
  189.    <td><input name="adresse" type="checkbox" value="adresse"></td>
  190.    <td>Adresse</td>
  191.   </tr>
  192.   <tr>
  193.    <td><input name="tel1" type="checkbox" value="tel1"></td>
  194.    <td>Num&eacute;ro de t&eacute;l&eacute;phone 1</td>
  195.   </tr>
  196.   <tr>
  197.    <td><input name="tel2" type="checkbox" value="tel2"></td>
  198.    <td>Num&eacute;ro de t&eacute;l&eacute;phone 2</td>
  199.   </tr>
  200.   <tr>
  201.    <td><input name="email" type="checkbox" value="email"></td>
  202.    <td>Adresse e-mail</td>
  203.   </tr>
  204.   <tr>
  205.    <td><input name="mode" type="radio" value="portrait" checked="checked"></td>
  206.    <td>Impression en portrait</td>
  207.   </tr>
  208.   <tr>
  209.    <td><input name="mode" type="radio" value="paysage"></td>
  210.    <td>Impression en paysage</td>
  211.   </tr>
  212.      </table>
  213.  <div id="ajout5">
  214.   <div id="annuler"><a href="../zone-a/adherents-afficher.php"></a></div>
  215.   <div id="valider"><input name="envoyer" type="image" src="../../styles/bdd/images/vide.gif"></div>
  216.  </div>
  217.  </form>
  218. </div>
  219. <div id="ajout6"></div>
  221. <?php
  222. //récupération des valeurs des champs:
  223. $requete = $_GET["query"] ;
  224. echo $requete ;
  225. ?>
  226. </div>
  227. </body>
  228. </html>


Message édité par bepimaco le 22-04-2005 à 18:59:09

---------------
Bepimaco
Reply

Marsh Posté le 23-04-2005 à 11:22:12    

Déjà les trucs du style :

document.imprimerFormulaire.nom...


Sont à bannir totalement, car ce sont des méthodes d'il y a 20 ans qui ne sont plus valides.
Donc, faisons la mise à jour.
 
1) Le formulaire. On va dire qu'on garde le tableau, vu que t'as l'air d'avoir trié ça sur deux colonne : champs & libellés de part et d'autres. Déjà t'as pas associé les libellé et les contrôle. Exemple :

<tr>
  <td><input id="naissance" name="naissance" type="checkbox" value="naissance"></td>
  <td><label for="naissance">Date de naissance</label></td>
</tr>


Donc note l'ajout de l'attribut id dans le input, et l'élément <label>, qui a un attribut for qui contient l'id du contrôle associé.
 
2) Le JS. Maintenant que tous tes contrôles ont un id, tu peux faire :

if(document.getElementById('naissance').checked == false){
  alert("Vous ne pouvez supprimer le nom" );
  return false;
}


Et là ça commence à p00trer.
 
Aussi, on ne met jamais de :

<script language="JavaScript">


Mais :

<script type="text/javascript">


Mais le mieux pour ce genre d'erreurs et de balancer ta page au validateur du w3
 
Sinon, pour ton erreur, y'aurait pas un problème avec les deux premier test qui renvoient [i]false[i] en cas d'erreur, et qui feraient sortir de la fonction, sans passer aux autres tests ?

Reply

Marsh Posté le 24-04-2005 à 09:28:17    

Merci de ton aide. J'ai troqué les name contre des id, j'ai ajouté les labels. Et pour ce qui est du javascript, je sais pas pourquoi j'ai mis celui-là : une bête erreur de copié collé.
 
Encore merci, tout fonctionne à merveille


---------------
Bepimaco
Reply

Marsh Posté le 24-04-2005 à 10:28:34    

Faut pas enlever les "name". Les name doivent etre uniquement utilise a l'interieur d'un formulaire, et pas ailleurs.
 
Donc tu remets les name, mais tu laisse les id.

Reply

Marsh Posté le 24-04-2005 à 10:41:34    

En fait, j'ai mis name + id merci de l'info


---------------
Bepimaco
Reply

Sujets relatifs:

Leave a Replay

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