formulaire php: ajout automatique d'une nouvelle ligne et tableaux
Hors lignePierremanu84 Le 21/01/2009 à 09:58 Profil de Pierremanu84 Configuration de Pierremanu84

Bonjour

Je travaille sur un projet d'informatisation d'une bibliothèque.
Je planche actuellement sur la partie gestion des prets. J'ai un formulaire par client, où il est possible d'entrer une référence (d'un livre) pour signaler une nouvelle location. Mais voilà, si la personne emprunte 10 livres, il faut répéter l'opération 10 fois...

Alors j'aimerais bien que dès qu'on entre le premier caractère dans le champs "référence", un autre champs, identique, s'ajoute automatiquement en dessous, et ainsi de suite...
Si j'ai bien compris celà se fera en deux temps:

1. je dois inclure du javascript dans le formulaire, sur un évenement en rapport avec le champs de texte. Mais pouvez-vous me guider sur ce point?

2. Les données seront présentées comme un tableau php (par exemple reference[]). Est-il possible, afin d'éviter toute erreur, de d'abord éliminer les doublons, au cas où une référence aurait été encodée deux fois? Ensuite, je suppose que je dois passer par un foreach, et par ligne du tableau, executer ma fonction php qui inscrit une nouvelle location dans le registre...

Merci de votre aide!
Hors ligneBrako Le 21/01/2009 à 15:41 Profil de Brako Configuration de Brako

Bonjour,

J'ai fait un petit exemple du coté Javascript : Exemple.

Coté html :


<html>
     <head>
          <!---inclusion des fonction Javascript--->
          <script type="text/javascript" src="js.js"></script>
     </head>
     <body>
          <span id="ajout">[<a href="javascript:add_ref('1')">Ajouter</a>]</span> <span id="del"></span>
          
          <form method="post" action="#">
               <div id="references">
                    <span id="child1">
                    <span id="label1">#1</span><input id="ref1" name="ref1" type="text">
                    </span>
                    <span id="child2">
                    </span>
                    <span id="child3">
                    </span>
                    <span id="child4">
                    </span>
                    <span id="child5">
                    </span>
                    <span id="child6">
                    </span>
                    <span id="child7">
                    </span>
                    <span id="child8">
                    </span>
                    <span id="child9">
                    </span>
                    <span id="child10">
                    </span>
                    <span id="child11">
                    </span>
                    <span id="child12">
                    </span>
                    <span id="child13">
                    </span>
                    <span id="child14">
                    </span>
                    <span id="child15">
                    </span>
                    <span id="child16">
                    </span>
                    <span id="child17">
                    </span>
                    <span id="child18">
                    </span>
                    <span id="child19">
                    </span>
                    <span id="child20">
                    </span>
                    <br/><input type="submit" value="valider"/>
               </div>
          </form>
     </body>
</html>


Coté Javascript :


function add_ref(i) {

     var ref = parseFloat(i) + 1;
     if(ref > 20)
          {
          alert('Le nombre maximum de références a été atteint');
          exit;
     }
     if(ref < 2) {
          document.getElementById('del').innerHTML = '';
     }
     else {
          document.getElementById('del').innerHTML = '[<a href="javascript:del_ref('+ref+')">Retirer</a>]';
     }
     document.getElementById('ajout').innerHTML = '[<a href="javascript:add_ref('+ref+')">Ajouter</a>]';
     document.getElementById('child'+ref).innerHTML += '<br/><span id="labe'+ref+'">#'+ref+'</span><input id="ref'+ref+'" name="ref'+ref+'" type="text">';


}

function del_ref(i) {
     var ref = parseFloat(i);
     document.getElementById('child'+ref).innerHTML = '';
     document.getElementById('ajout').innerHTML = '[<a href="javascript:add_ref('+(ref - 1)+')">Ajouter</a>]';
     
     if(ref <= 2) {
          document.getElementById('del').innerHTML = '';
          }
     else {
          document.getElementById('del').innerHTML = '[<a href="javascript:del_ref('+(ref - 1)+')">Retirer</a>]';
     }
}


Comme je suis pas un professionnel du javascript, le nombre de référence est bridé à 20.

Côté Php il faut faire une boucle (pour récupérer les données du formulaire) :
Dans cette boucle il faut vérifier que la référence :
- n'est pas vide,
- a une syntaxe correcte (nombre de caractère par exemple)
- n'est pas présente dans le tableau (array())

Si Toutes ces conditions sont remplies il faut ajouter la référence au tableau.

Après tu peux faire un boucle for avec le tableau pour l'enregistrement.
--
Ce qui donne une éventuelle matière à suspecter une quelconque propagande ...
Hors lignePierremanu84 Le 21/01/2009 à 17:30 Profil de Pierremanu84 Configuration de Pierremanu84

merci pour ta réponse

mais pour une question pratique (rapidité d'encodage), le champs suivant devrait apparaitre dès que le champs précédent a été modifié, afin qu'il n'y ai plus qu'à appuyer sur TAB pour passer au suivant.
Hors ligneBrako Le 21/01/2009 à 19:21 Profil de Brako Configuration de Brako

Voila j'ai ajouté l'événement onKeydown, comme ça j'obtiens l'effet voulu : Exemple

Combien de caractères ont les références ? Car on pourrait très bien pour éviter les erreurs empêcher l'affichage champ suivant tant que le champ courant ne contient pas X de caractères, ou entre X et X de caractères ...

coté html :


<html>
     <head>
          <!---inclusion des fonction Javascript--->
          <script type="text/javascript" src="js.js"></script>
     </head>
     <body>
          <span id="ajout">[<a href="javascript:add_ref('1')">Ajouter</a>]</span> <span id="del"></span>
          
          <form method="post" action="#">
               <div id="references">
                    <span id="child1">
                    <span id="label1">#1</span><input id="ref1" name="ref1" type="text" onKeydown="add_ref(1)">
                    </span>
                    <span id="child2" style="display: none;">
                    </span>
                    <span id="child3" style="display: none;">
                    </span>
                    <span id="child4" style="display: none;">
                    </span>
                    <span id="child5" style="display: none;">
                    </span>
                    <span id="child6" style="display: none;">
                    </span>
                    <span id="child7" style="display: none;">
                    </span>
                    <span id="child8" style="display: none;">
                    </span>
                    <span id="child9" style="display: none;">
                    </span>
                    <span id="child10" style="display: none;">
                    </span>
                    <span id="child11" style="display: none;">
                    </span>
                    <span id="child12" style="display: none;">
                    </span>
                    <span id="child13" style="display: none;">
                    </span>
                    <span id="child14" style="display: none;">
                    </span>
                    <span id="child15" style="display: none;">
                    </span>
                    <span id="child16" style="display: none;">
                    </span>
                    <span id="child17" style="display: none;">
                    </span>
                    <span id="child18" style="display: none;">
                    </span>
                    <span id="child19" style="display: none;">
                    </span>
                    <span id="child20" style="display: none;">
                    </span>
                    <br/><input type="submit" value="valider"/>
               </div>
          </form>
     </body>
</html>


Coté javascript :


function add_ref(i) {

     var ref = parseFloat(i) + 1;
     if(ref > 20)
          {
          exit;
     }
     if(document.getElementById('child'+ref).style.display == "none")
          {
          document.getElementById('child'+ref).style.display = 'inline';
          document.getElementById('ajout').innerHTML = '[<a href="javascript:add_ref('+ref+')">Ajouter</a>]';
          document.getElementById('child'+ref).innerHTML += '<br/><span id="labe'+ref+'">#'+ref+'</span><input id="ref'+ref+'" name="ref'+ref+'" type="text" onKeydown="add_ref('+ref+')>';
          }
          
     if(ref < 2) {
          document.getElementById('del').innerHTML = '';
     }
     else {
          document.getElementById('del').innerHTML = '[<a href="javascript:del_ref('+ref+')">Retirer</a>]';
     }

}

function del_ref(i) {
     var ref = parseFloat(i);
     document.getElementById('child'+ref).innerHTML = '';
     document.getElementById('child'+ref).style.display = 'none';
     document.getElementById('ajout').innerHTML = '[<a href="javascript:add_ref('+(ref - 1)+')">Ajouter</a>]';
     
     if(ref <= 2) {
          document.getElementById('del').innerHTML = '';
          }
     else {
          document.getElementById('del').innerHTML = '[<a href="javascript:del_ref('+(ref - 1)+')">Retirer</a>]';
     }
}
--
Ce qui donne une éventuelle matière à suspecter une quelconque propagande ...
Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels