rss
Options Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[PHP/JS]Ajotuer des champs dynamiquement

Leskate, le mardi 27 mai 2008 à 12:29:20
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.
Lez4!
Répondre à Leskate  Signaler ce message aux modérateurs Aller au dernier message

1


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
vlmath, le mardi 27 mai 2008 à 13:18:08
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
   
Répondre à vlmath

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Leskate, le mercredi 28 mai 2008 à 09:05:29
Oui, bonne idée!
Je ferais ca, si je n'arrives pas a utiliser le multichamps de Alain_42.

Merci de ta réponse :) Lez4!
   
Répondre à Leskate

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Xil, le mardi 27 mai 2008 à 13:30:54
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.
   
Répondre à Xil

3


  • 2    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
Alain_42, le mardi 27 mai 2008 à 13:43:05
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>
   
Répondre à Alain_42

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Leskate, le mercredi 28 mai 2008 à 08:42:13
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? Lez4!
   
Répondre à Leskate

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Alain_42, le mercredi 28 mai 2008 à 14:04:08
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']
   
Répondre à Alain_42

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Leskate, le mercredi 28 mai 2008 à 14:44:24
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à? ;) Lez4!
   
Répondre à Leskate

8


  • 2    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
Alain_42, le mercredi 28 mai 2008 à 16:29:36
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>
   
Répondre à Alain_42

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Leskate, le jeudi 29 mai 2008 à 15:08:23
Parfait : ca marche!
Merci :D Lez4!
   
Répondre à Leskate
Posez votre question Répondre
[php/JavaScript] Redirection (Résolu)Salut à tous! Je débute en PHP/JavaScript et aprés avoir chercher sur le net je n'ai pas trouvé si ce que je veux faire est possible: Je fais une un lien sur mes pages vers une seule et même page d'attente, et je voudrais en fonction de la... www.commentcamarche.net/forum/affich-6942026-php-javascript-redirection
Ajout de champ de texte sur clic (Résolu)Bonjour!! je suis débutant en javascript et voici mon problème: J'ai crée une interface graphique dont l'une des pages est une sorte de formulaire avec plusieurs champs à remplir . Mon but est de créer un champ dynamique : à chaque clic sur... www.commentcamarche.net/forum/affich-5994281-ajout-de-champ-de-texte-sur-clic
Dreamweaver CS3 est-il une panacée? (Résolu)Bonjour, Est-il exact que, pour quelqu'un ayant de solides bases en XHTML et CSS2, Dreamweaver permet de créer des sites complets et dynamiques sans connaître PHP, Javascript, Flash et le reste ? Merci de me donner votre opinion. Amicalement. gesalz www.commentcamarche.net/forum/affich-4827179-dreamweaver-cs3-est-il-une-panacee
[Webmaster] Coloration syntaxique dans vos pages webSi vous avez un site web contenant des exemples de code (php, javascript, C#, Delphi, Python...), il peut être intéressant d'avoir une coloration syntaxique. C'est parfois pénible à réaliser, mais il existe une librairie Javascript qui permet de... www.commentcamarche.net/faq/sujet-3157-webmaster-coloration-syntaxique-dans-vos-pages-web
[Javascript] Effacer un champ de formulaire lors du clic (focus)Il vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue. L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de... www.commentcamarche.net/faq/sujet-884-javascript-effacer-un-champ-de-formulaire-lors-du-clic-focus
Actualiser une valeur sous php/mysql (Résolu)Bonjour à tous, je cherche une solution au problème suivant : je ne sais pas comment modifier en php un seul champ dans un enregistrement de base mysql, en l'occurence une valeur oui/non dans une base de travail où une personne entre les données... www.commentcamarche.net/forum/affich-2949764-actualiser-une-valeur-sous-php-mysql
Utiliser variables session PHP dans une popup (Résolu)Bonjour, Je fais une application web, en php, javascript. j'ai une page 'xxx.php', qui contient une variable de session : $_SESSION['xxx']; et j'aimerais la passer a ma pop-up. problème ca ne transfère pas les variables... www.commentcamarche.net/forum/affich-6948562-utiliser-variables-session-php-dans-une-popup
Php pb de CHMOD 777 (Résolu)Bonjour, J'ai aidé pas mal d'utilisateurs de ce forum et c'est à mon tour de crier à l'aide. Par un script php de veux créer dynamiquement un répertoire (dossier) dans un répertoire parent qui est déja en 777 www.commentcamarche.net/forum/affich-5832387-php-pb-de-chmod-777
Toutes les réponses pour « [PHP/JS]Ajotuer des champs dynamiquement »