Tableau extensible avec des champs select lié à une base mysql

Résolu
Khris2015 -  
Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,

je suis vraiment débutant, je dirais même nul en html/php/mysq. ça fait un bon moment j'essaie de faire une page dans lequel, j'ai un tableau qui doit me permettre d'enregistrer plusieurs agents en même temps. sur chaque ligne du tableau, je veux avoir un champs select qui me permette de selectionner un agent dans ma base mysql et à coté, un bouton "+" pour ajouter une autre ligne pour choisir un autre agent.

J'ai pu faire le tableau avec le champs select. pour la première ligne pas de problème, j'arrive à afficher la liste des agents et d'en choisir un. le problème c'est avoir les lignes suivantes avec le champs select et avec en option la liste des agents. la deuxième ligne vient mais rien ne s'y affiche, comment faire? je suis à bout de souffle... Merci de votre aide!

Voici mon code:

le tableau 

     <table border="1" id="kids" align="center">
     <tr>
         <th>Nom et prénom(s)</th>
     </tr>
     <tbody  >
         <tr >
             <td  >
                 <select name="nom" id="demande">            
                 <?php while ($resultat_agent = mysql_fetch_array ($donnees_agent))
  {?>
          echo <option value="<?php echo $resultat_agent['agt_id']?>"><?php echo $resultat_agent['agt_nom'].' '.$resultat_agent['agt_pren'];?></option>
           <?php
      }?>           
          </select>
                </td>
                <td>
                   <input type="button" id="add_kid()" onClick="addKid()" value="+" />
                 </td>
                </tr>
            </tbody>
      </table>


mon code javascript 

     <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 
                    document.getElementById('kids').appendChild(newRow);
                    i++;
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
 
        </script>



EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser dans tes prochains messages.
.

A voir également:

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,


la deuxième ligne vient mais rien ne s'y affiche

Normal .. vu que quand tu créé ta ligne .. tu ne mets rien dans ton select.... 
 newRow.innerHTML = '<td> <select name="nom_'+i+'"></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';



Plusieurs possibilités :
- Tu clone le SELECT existant (celui qui dispose de la liste)
- Tu vas chercher, via AJAX, les données nécessaires à son remplissage.

- Dans les deux cas, des exemples existent sur le net.
- Penses à utiliser JQUERY. ( que ça soit pour la manipulation de l'ajax ou pour cloner tes éléments ...JQUERY facilite grandement l'écriture du code.)

Par exemple.. pour cloner en jquery :
https://api.jquery.com/clone/


0
Réponse 2 / 6
Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Merci jordane45 pour ta promtitude.
J'ai essayé de mettre mon code php qui renvoit la liste des agent dans mon select, mais à l'execution, rien ne s'affiche dans les champs select

mon code javascript modifié. Merci de voir pourquoi ça ne marche pas! 

  
   <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"><?php 
       while ($resultat_agent = mysql_fetch_array ($donnees_agent))
       {?>
              echo <option value="<?php echo $resultat_agent['agt_id']?>"><?php echo $resultat_agent['agt_nom'].' '.$resultat_agent['agt_pren'];?></option>
               <?php
       }    
         ?>  </select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 
                    document.getElementById('kids').appendChild(newRow);
                    i++;
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
 
        </script>


EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser dans tes prochains messages.
.
0
Réponse 3 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Javascript s'exécute côté POSTE utilisateur ..... alors que le PHP, lui, se fait côté SERVEUR !

Je t'ai donné dans mon précédent message, les deux solutions possibles à utiliser.
Le clonage
ou l' AJAX.
(perso.. je pencherai plus pour l'ajax).

0
Réponse 4 / 6
Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Salut,
Je reviens encore avec des inquiétudes. Je suis vraiment un nul en développement web. Je suis allé voir ton lien, je l'ai lu et essayé de comprendre. J'ai vu les merveilles que peut faire la méthode .clone() qu'offre jquery. Seulement, je sais pas trop comment l'adapter à mon cas. Je t'envoie un extrait de mon script, tu vas certainement en rire, mais bon je suis nul et je veux vraiment apprendre...
Merci pour l'effort que tu fais pour me comprendre! 


  <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"><script>
$( "#nom" ).clone().appendTo( "#nom" );
</script></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 					
                    document.getElementById('kids').appendChild(newRow);
                    i++;
					
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
			
			 
        </script>


Je n'ai certainement pas bien appelé ma méthode .clone(), car je reçois des erreurs. Peux tu m'aider, stp!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour, 


<table id='montableau' border='1' id='kids' align='center'>
 <thead>
  <tr>
   <th>Nom et prénom(s)</th>
  </tr>
  </thead>
  <tbody  >
    <tr id='tr_1'>
    <td>
     <select name='nom' id='demande'>            
     <?php 
     while ($resultat_agent = mysql_fetch_array ($donnees_agent)){
      echo "<option value='".$resultat_agent['agt_id']."'>
          ".$resultat_agent['agt_nom']." ".$resultat_agent['agt_pren'].
        "</option>";
     }           
     ?>
     </select>
    </td>
    <td>
     <input type='button' id='add_kid' onClick='addKid()' value='+' />
     <input type='button' class='removeKid'  value='-' />
     </td>
   </tr>
  </tbody>
</table>

<script type="text/javascript">
     
 function compteTR(id_table){
  return $('#'+id_table +' tr').length;     
 }

 function addKid(){
   var nbMaxLignes = 6
   var nbTR = compteTR("montableau") +1 ;
   if (nbTR < nbMaxLignes){
       var $tr = $("#tr_1");
      var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
   }
   
 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >2){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });
 }

 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >2){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });

</script>


Cordialement,
Jordane
0
Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Grand, grand merci jordane45, j'ai juste remplacer ta ligne 
foreach( $arr as $resultat_agent)
par ma ligne 
 while ($resultat_agent = mysql_fetch_array ($donnees_agent))
et ça marche nikel!!! Encore merci!
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
prends le code que j'ai ajouté en dessous... il apporte quelques petites corrections.
0
Réponse 6 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Petite correction : 

<table id='montableau' border='1' id='kids' align='center'>
 <thead>
  <tr>
   <th>Nom et prénom(s)</th>
  </tr>
  </thead>
  <tbody  >
    <tr id='tr_1'>
    <td>
     <select name='nom[]' id='demande'>            
     <?php 
     while ($resultat_agent = mysql_fetch_array ($donnees_agent)){
      echo "<option value='".$resultat_agent['agt_id']."'>
          ".$resultat_agent['agt_nom']." ".$resultat_agent['agt_pren'].
        "</option>";
     }           
     ?>
     </select>
    </td>
    <td>
     <input type='button' id='add_kid' onClick='addKid()' value='+' />
     <input type='button' class='removeKid'  value='-' />
     </td>
   </tr>
  </tbody>
</table>

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
 function compteTR(id_table){
  return $('#'+id_table +' tr').length;     
 }

 function addKid(){
   var nbMaxLignes = 6
   var nbTR = compteTR("montableau tbody") +1 ;
   if (nbTR < nbMaxLignes){
       var $tr = $("#tr_1");
      var $clone = $tr.clone();
        $clone.find(':text').val('');
         $clone.attr('id',"tr_"+nbTR );
        $tr.after($clone);
   }
   
 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >1){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });
 }

 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >1){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Si la question est résolue..
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

Cordialement,
Jordane
0
Khris2015 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Merci Jordane! tu es cool!
0

Discussions similaires

mon téléphone ne reconnait plus sa base
TELEPHONaz -
baladur13 -

7 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses