Sujet Précédent Sujet Suivant

[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
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.
A voir également:

3 réponses

Réponse 1 / 3
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
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
Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008 8
28 mai 2008 à 08:42
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?
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894 > Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008
28 mai 2008 à 14:04
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']
0
Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008 8 > Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017
28 mai 2008 à 14:44
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à? ;)
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894 > Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008
28 mai 2008 à 16:29
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>
0
Leskate Messages postés 80 Date d'inscription lundi 11 juin 2007 Statut Membre Dernière intervention 29 mai 2008 8 > Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017
29 mai 2008 à 15:08
Parfait : ca marche!
Merci :D
0
Réponse 2 / 3
vlmath Messages postés 793 Date d'inscription vendredi 20 octobre 2006 Statut Contributeur Dernière intervention 4 septembre 2011 160
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
1
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
Oui, bonne idée!
Je ferais ca, si je n'arrives pas a utiliser le multichamps de Alain_42.

Merci de ta réponse :)
0
Réponse 3 / 3
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
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.
0

Discussions similaires

ALERT en php
snoopy -
appkech -

14 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses
que veut dire php natif
playboy-1990 -
avion-f16 -

2 réponses