[Résolu] Vérification en javascript d'un tableau dynamique en PHP

Vérification en javascript d'un tableau dynamique en PHP [Résolu] - HTML/CSS - Programmation

Marsh Posté le 05-12-2006 à 09:50:43    

Bonjour,
 
Voici ma configuration, je possede deux pages :
la premiere qui contient uniquement un champ de texte pour inserer le nombre de ligne que désire avoir l'utilisateur
 

Code :
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Document sans titre</title>
  6. </head>
  7. <body>
  8. <form name="form1" method="post" action="test1.php">
  9.  Nombre de ligne<input type="text" name="nbr"><BR>
  10.    <input type="submit" name="Submit" value="Envoyer">
  11. </form>
  12. </body>


 
Puis une seconde qui crée dynamique un tableau avec 2 colonne et n lignes (selon la valeur que l'utlisateur a inseré dans la page précédente l'utilisateur)
 

Code :
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <title>Document sans titre</title>
  7. </head>
  9. <body>
  10. <form name="form1" method="post" action="test2.php">
  11. <?php
  13. for ($i=0;$i<$nbr;$i++){
  14. ?>
  15.     <tr>
  16.       <td width="84" height="47"><div>
  17.     <?php
  18.  echo "<input name='num".$i."' type='text'>";
  19. ?>
  20.       </div></td>
  21.       <td width="169"><div>
  22. <?php
  23.  echo "<input name='nom".$i."' type='text'>";
  24. ?>
  25.      
  26.       </div></td>
  27. <?php
  28. }
  29. ?>
  30. <p>
  31.   <input type="button" name="button" value="Retour" onclick="history.go(-1)">
  32.   <input name="Submit" type="submit" value="Envoyer" onSubmit="return validation();>
  33. </p>
  34. </form>
  35. </body>
  36. </html>


 
 
En fait ce que j'aimerais faire maintenant c'est lors de l'appui sur le bouton envoyer de vérifier par javascript si l'ensemble des cases sont remplies.
 
J'ai donc fait une petite fonction en javascript que j'appel lorsque je clique sur envoyer

Code :
  1. <script language="javascript" type="text/javascript">
  2. function validation()
  3. {
  4. var test = 0;
  5. if(document.form1.???.value == "" )
  6. {
  7.         document.form1.???.style.background = "red";
  8.          document.form1.???.focus();
  9.          test ++;
  10.      }
  11. else document.form1.???.style.background = "white";
  13. if (test > 0) return false;
  14. else return true;
  15. }
  16. </script>


 
Le probleme avec le javascript est qu'il faut le nom de la case or dans mon cas mes cases se nomme num0, num1...
Or pour verifier il faut ecrire document.form1.nom0.value == ""
 
j'aimerais donc pouvoir remplacer nom0 par quelque chose comme nom.i afin de rentré cela dans une boucle et faire une vérification avec une boucle uniquement comme ceci :
 
 var test = 0;
for (i=0;i<nbr;i++){
 if(document.form1.nom(i).value == "" )  
 {  
        document.form1.nom(i).style.background = "red";
         document.form1.nom(i).focus();  
         test ++;
     }
 else document.form1.nom(i).style.background = "white";
 
 if (test > 0) return false;
 else return true;
}
 
Est ce possible ?
Ou avez vous une autre solution ?
 
Merci de votre aide !
Johnson


Message édité par johnson951 le 06-12-2006 à 15:18:44
Reply

Marsh Posté le 05-12-2006 à 09:50:43   

Reply

Marsh Posté le 05-12-2006 à 10:00:59    

Laisse tomber les document.form.bidule qui n'existent plus. En mettant un id sur le form déjà (name n'existe plus et sert à rien), et en mettant le Js sur l'évènement onsubmit :

Code :
  1. <form id="form1" method="post" action="test2.php" onsubmit="return validation()">


 
Met le JS dans un fichier à part, il pourra être mis en cache et allégera le serveur un p'tit peu

Code :
  1. var inputList = document.getElementById('form1').getElementsByTagName('input');
  2. var test = 0;
  3. var count = inputList.length;
  4. for(var i = 0; i < count; i++) {
  5.   var input = inputList[i];
  6.   if(input.value == '') {
  7.     input.style.backgroundColor = 'red';
  8.     input.focus;
  9.     test++;
  10.   } else {
  11.     input.style.backgroundColor = 'white';
  12.   }
  13. }
  15. return (test == 0);


Reply

Marsh Posté le 05-12-2006 à 11:42:44    

Perso j'utilise le "this" que je trouve encore plus pratique, mais sur lequel je ne vais pas débattre de la performance, car je ne la connais pas ;)
 

Code :
  1. <form method="post" action="whatever.php" onsubmit="return validation(this)">


 
Cependant, j'utilisais le "this" avec uniquement des appels fixes aux champs du formulaire concerné :  

Code :
  1. function validation(monform)
  2. { monform.bouton.style.backgroundColor = 'red' ;
  3.   // etc.
  4. }


 
Je n'ai jamais essayé la combinaison avec le -superbe- getElementsByTagName que propose FlorentG ici. Peut-être que cette solution fonctionne aussi :  

Code :
  1. var inputList = monform.getElementsByTagName('input');


 
mais bon ça ne change pas grand chose...
 

Reply

Marsh Posté le 05-12-2006 à 12:00:45    

le this pointe exactement sur le même élement que ce que retourne le getElementById('idDuForm'), en l'occurence l'objet HTMLFormElement.

 

ça ne change donc rien du tout sauf un appel à la fonction getElementById en mois et eventuellement une ré-usabilité supérieure de la fonction pour d'autres formulaires.


Message édité par anapajari le 05-12-2006 à 12:01:19
Reply

Marsh Posté le 06-12-2006 à 15:16:34    

Parfait FlorenG ca marche super bien !

Reply

Sujets relatifs:

Leave a Replay

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