[PHP/JS]Ajotuer des champs dynamiquement
Résolu/Fermé
Leskate
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
-
27 mai 2008 à 12:29
Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008 - 29 mai 2008 à 15:08
Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008 - 29 mai 2008 à 15:08
A voir également:
- [PHP/JS]Ajotuer des champs dynamiquement
- Easy php - Télécharger - Divers Web & Internet
- Word mettre à jour tous les champs ✓ - Forum Word
- Afficher champs de tableau croisé dynamique - Guide
- MAJ automatique de champs répétitifs dans un document Word - Forum Word
- Générique champs elysées john miles - Forum Musique / Radio / Clip
3 réponses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
27 mai 2008 à 13:43
27 mai 2008 à 13:43
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>
vlmath
Messages postés
794
Date d'inscription
vendredi 20 octobre 2006
Statut
Contributeur
Dernière intervention
4 septembre 2011
160
27 mai 2008 à 13:18
27 mai 2008 à 13:18
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
Leskate
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
8
28 mai 2008 à 09:05
28 mai 2008 à 09:05
Oui, bonne idée!
Je ferais ca, si je n'arrives pas a utiliser le multichamps de Alain_42.
Merci de ta réponse :)
Je ferais ca, si je n'arrives pas a utiliser le multichamps de Alain_42.
Merci de ta réponse :)
Xil
Messages postés
350
Date d'inscription
vendredi 18 janvier 2008
Statut
Membre
Dernière intervention
11 juin 2009
257
27 mai 2008 à 13:30
27 mai 2008 à 13:30
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.
28 mai 2008 à 08:42
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?
28 mai 2008 à 14:04
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']
28 mai 2008 à 14:44
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à? ;)
28 mai 2008 à 16:29
ci joint la fonction que tu vas rajouter dans ta page formualire:
et ton formulaire:
29 mai 2008 à 15:08
Merci :D