[PHP/JS]Ajotuer des champs dynamiquement
Résolu
Leskate
Messages postés
80
Date d'inscription
Statut
Membre
Dernière intervention
-
Leskate Messages postés 80 Date d'inscription Statut Membre Dernière intervention -
Leskate Messages postés 80 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis en train de développer des outils de gestion pour une association.
Pour ce faire, j'ai besoin de récupérer les élèves présent à leurs cours :
je propose un formulaire avec la date, le lieu... et au moins un 'select' avec le nom des élèves.
Cependant, il peut y avoir jusqu'à 19 élèves par cours! Je ne vois pas l'utilité d'afficher 19 liste déroulantes si seulement 4 sont utilisées en moyenne...
J'ai donc penser mettre un lien vers une fonction JS qui rajoute un champs.
Mais le select se ferme juste avant le <?php !
J'en ai donc conclu qu'il faut tout mettre sur la même ligne, et donc mettre le select dans le php. Cependant, on ne peux pas récupérer le numéro de champ en cours 'passé en javascript donc après l'interprétation PHP.
J'avoue être bloqué et je souhaiterais, soit une solution alternative, soit une idée pour débloque celle la !
Merci d'avance.
je suis en train de développer des outils de gestion pour une association.
Pour ce faire, j'ai besoin de récupérer les élèves présent à leurs cours :
je propose un formulaire avec la date, le lieu... et au moins un 'select' avec le nom des élèves.
Cependant, il peut y avoir jusqu'à 19 élèves par cours! Je ne vois pas l'utilité d'afficher 19 liste déroulantes si seulement 4 sont utilisées en moyenne...
J'ai donc penser mettre un lien vers une fonction JS qui rajoute un champs.
function RajouterUnChamps (NumChamp)
{
-> le hinner avec le <select name="id_eleve"+NumChamp>
<?php
-> attaque SQL + liste des options
?>
-> </select>
}
Mais le select se ferme juste avant le <?php !
J'en ai donc conclu qu'il faut tout mettre sur la même ligne, et donc mettre le select dans le php. Cependant, on ne peux pas récupérer le numéro de champ en cours 'passé en javascript donc après l'interprétation PHP.
J'avoue être bloqué et je souhaiterais, soit une solution alternative, soit une idée pour débloque celle la !
Merci d'avance.
A voir également:
- [PHP/JS]Ajotuer des champs dynamiquement
- Easy php - Télécharger - Divers Web & Internet
- Expert php pinterest - Télécharger - Langages
- Le nom du champs de tableau croisé dynamique n'est pas valide ✓ - Forum Excel
- Word mettre à jour tous les champs - Forum Word
- Js/packed.agent.n ✓ - Forum Virus
3 réponses
Salut,
dans un grand élan de bonté:
est ce que cet exemple te va:
dans un grand élan de bonté:
est ce que cet exemple te va:
<html>
<head>
<title>Drag and Drop entre deux listes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
function Transferer_elem_select(formulaire,liste_lire,liste_ecrire){
var array_index_a_oter=new Array();
// On compte le nombre d'item de la liste select
NbItems = document.forms[formulaire].elements[liste_lire].length;
// On lance une boucle pour rechercher les items selectionnes
for(a=0; a < NbItems; a++){
if(document.forms[formulaire].elements[liste_lire].options[a].selected){
var valeur=document.forms[formulaire].elements[liste_lire].options[a].value;
var num_index=document.forms[formulaire].elements[liste_lire].options[a].index;
// on memorise les items a oter de la liste origine
array_index_a_oter.push(num_index);
//on le rajoute a la liste destination
nouvel_element = new Option(document.forms[formulaire].elements[liste_lire].options[a].text,document.forms[formulaire].elements[liste_lire].options[a].value,false,false);
document.forms[formulaire].elements[liste_ecrire].options[document.forms[formulaire].elements[liste_ecrire].length] = nouvel_element;
}
}
// et on enleve de la liste origine les options dont les index sont memorises
// on inverse d'abord l'array pour comencer par la fin, sinon celui enlevé supprime un index et le suivant est faux
array_index_a_oter=array_index_a_oter.reverse();
for(i=0;i<array_index_a_oter.length;i++){
document.forms[formulaire].elements[liste_lire].remove(array_index_a_oter[i]);
}
}
//fonction comptage dans liste match et affichage
function total_liste(formulaire,liste,id_ecrire){
var NbItems = document.forms[formulaire].elements[liste].length;
if(NbItems>1){
var aff=NbItems+" joueurs";
}else{
var aff=NbItems+" joueur";
}
var obj=document.getElementById(id_ecrire);
obj.innerHTML=aff;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" >
<table valign="center">
<tr>
<th>Liste Joueurs<br>equipe xxxxxx</th><th> </th><th>Feuille match <div id="nombre_j"></div></th>
</tr>
<tr>
<td>
<select name="liste1" size="8" multiple style="width: 150px">
<option value="1">Joueur 1</option>
<option value="2">Joueur 2</option>
<option value="3">Joueur 3</option>
<option value="4">Joueur 4</option>
<option value="5">Joueur 5</option>
<option value="6">Joueur 6</option>
<option value="7">Joueur 7</option>
<option value="8">Joueur 8</option>
</select><br><br>
</td>
<td>
<input name="add" type="button" value="> >" onClick="Transferer_elem_select('form1','liste1','liste2'); total_liste('form1','liste2','nombre_j');"/>
<br>
<input name="retire" type="button" value="< <" onClick="Transferer_elem_select('form1','liste2','liste1'); total_liste('form1','liste2','nombre_j');"/>
</td>
<td>
<select name="liste2" multiple style="width: 150px" size="8">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Salut,
Et si tu stockais les 19 élèves dans un tableau javascript ; la fonction qui ajoute un champs pourrait aller piocher les infos la dedans, et les afficher seulement si tu lance la fonction ajouter, non ?
@Bientôt
Et si tu stockais les 19 élèves dans un tableau javascript ; la fonction qui ajoute un champs pourrait aller piocher les infos la dedans, et les afficher seulement si tu lance la fonction ajouter, non ?
@Bientôt
Bonjour,
J'ai pu constaté que parfois (souvent?) le système d'ajout d'un champ de type select via innerHTML était un peu bancal.
Il y'a plusieurs manières de faire pour "ajouter" un champ:
- L'inclure dans la page au chargement en caché (display:none)
- Le créer dynamiquement (idéalement via les objets DOM)
Tu peux par exemple, créer 20 select :
Et côté javascript :
(A tester, je l'ai écrit vite fait)
Ou par DOM :
tu crée un array javascript (echo 'var arrayOption = new Array(); arrayOption[0] = "Student1";...';)
Voir ensuite les fonctions createElement, appendChild, select.add(options),...
Demande si tu as besoin de précisions.
Pour la doc DOM : http://krook.org/jsdom/
Un des avantages du DOM, c'est qu'en plus tu peu choisir de ne pas ajouter dans la nouvelle select, les options déjà sélectionnées dans les autres.
J'ai pu constaté que parfois (souvent?) le système d'ajout d'un champ de type select via innerHTML était un peu bancal.
Il y'a plusieurs manières de faire pour "ajouter" un champ:
- L'inclure dans la page au chargement en caché (display:none)
- Le créer dynamiquement (idéalement via les objets DOM)
Tu peux par exemple, créer 20 select :
<?php
//attaque SQL
$options = '<option value="--">---</option><option value="etudiant1">étudiant1</option>...[etc pour chaque étudiant]';
for ($i = 1; $i<=20; $i++) {
//Pour afficher la première
$display = $i == 1 ? 'block' : 'none';
echo '<select name="student' .$i. '" id="student_' .$i. '" style="display:'. $display .'" onchange="showSelect(this)">' . $options . '</select>';
}
?>
Et côté javascript :
<script language="javascript">
function showSelect(lastSelect){
var tmp = lastSelect.id.split('_');
var lastID = tmp[1];
if(lastID < 20) {
for (var i = 1; i<lastID+1; i++) {
document.getElementById('student_'+i).style.display = 'block';
}
}
}
</script>
(A tester, je l'ai écrit vite fait)
Ou par DOM :
tu crée un array javascript (echo 'var arrayOption = new Array(); arrayOption[0] = "Student1";...';)
Voir ensuite les fonctions createElement, appendChild, select.add(options),...
Demande si tu as besoin de précisions.
Pour la doc DOM : http://krook.org/jsdom/
Un des avantages du DOM, c'est qu'en plus tu peu choisir de ne pas ajouter dans la nouvelle select, les options déjà sélectionnées dans les autres.
J'ai un peu adapter ton code, histoire qu'il me récupère bien les étudiants de ma bdd. Cependant, je bute sur l'exploitation du formulaire. Comment récupère tu les valeurs?
J'ai voulu regarder comment étaient ordonnées les données et les ai fait passées en GET. Cependant, je reçois un $_GET contenant uniquement le 'submit'.
Comment traites tu ce formulaire?
le formulaire est envoyé en method="post"
pour l'envoie, tu mets un <input type="button" name="..." value="Envoyer" onClick="fct_envoi((id_liste);">
c'est la fonction fct_envoi((id_liste) qui sélectionne toute la liste 2 , modifie le nom de la liste pour lui mettre liste2[] au lieu de liste et l'envoie au script par un Submit();
tu récupéres dans un array $_POST['liste2']
Je crains que mes compétences en JS se limitent rapidement! Je serais incapable de créer une telle fonction :(
A moins que tu l'ai déjà? ;)
ci joint la fonction que tu vas rajouter dans ta page formualire:
// fonction qui va selectionner tous les elements de la liste des destinataires et envoyer le formulaire function select_envoyer(formulaire,liste){ NbItems = document.forms[formulaire].elements[liste].length; for(a=0; a < NbItems; a++){ //selection de tous les items if(document.forms[formulaire].elements[liste].options[a].selected == false){ document.forms[formulaire].elements[liste].options[a].selected =true; } } //changement du nom de la liste document.forms[formulaire].elements[liste].name=liste+"[]"; //et on envoie document.forms[formulaire].submit(); }et ton formulaire:
<form name="form1" method="post" action="" > <table valign="center"> <tr> <th>Liste Joueurs<br>equipe xxxxxx</th><th> </th><th>Feuille match <div id="nombre_j"></div></th> </tr> <tr> <td> <select name="liste1" size="8" multiple style="width: 150px"> <option value="1">Joueur 1</option> <option value="2">Joueur 2</option> <option value="3">Joueur 3</option> <option value="4">Joueur 4</option> <option value="5">Joueur 5</option> <option value="6">Joueur 6</option> <option value="7">Joueur 7</option> <option value="8">Joueur 8</option> </select><br><br> </td> <td> <input name="add" type="button" value="> >" onClick="Transferer_elem_select('form1','liste1','liste2'); total_liste('form1','liste2','nombre_j');"/> <br> <input name="retire" type="button" value="< <" onClick="Transferer_elem_select('form1','liste2','liste1'); total_liste('form1','liste2','nombre_j');"/> </td> <td> <select name="liste2" multiple style="width: 150px" size="8"> </select> </td> </tr> <tr><td><input type=button" name="envoyer" value="Envoyer" onClick="select_envoyer('form1','liste2');" </table> </form>Merci :D