[PHP/JS]Ajotuer des champs dynamiquement [Résolu/Fermé]

Signaler
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
-
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
-
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.

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.

3 réponses

Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
888
Salut,

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>&nbsp;</th><th>Feuille match &nbsp;&nbsp;<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>
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
8
Excellent ton idée! Je cherchais à faire ça la dernière fois :D cependant , ne sachant pas où me renseigner, j'ai abandonné ^_^

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?
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
888 >
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008

Salut,

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']
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
8 >
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017

On est obligé de passer par une fonction JavaScript pour récupérer les donnée?
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à? ;)
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
888 >
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008

Cette fonction ne récupére pas les données, la liste 2 étant multiselect, la fct va selectionner tous les elemnts qui sont dedans, modifier le nom de la lsite pour lui ajouter [] et faire le submit()) c a d envoi du formulaire

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>&nbsp;</th><th>Feuille match &nbsp;&nbsp;<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>
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
8 >
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017

Parfait : ca marche!
Merci :D
Messages postés
793
Date d'inscription
vendredi 20 octobre 2006
Statut
Contributeur
Dernière intervention
4 septembre 2011
159
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
Messages postés
80
Date d'inscription
lundi 11 juin 2007
Statut
Membre
Dernière intervention
29 mai 2008
8
Oui, bonne idée!
Je ferais ca, si je n'arrives pas a utiliser le multichamps de Alain_42.

Merci de ta réponse :)
Messages postés
350
Date d'inscription
vendredi 18 janvier 2008
Statut
Membre
Dernière intervention
11 juin 2009
252
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 :
<?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.