Form Liste avec si select "autre" ouvre un div

[gandalf76fr]

Bonjour,

Je me présente : William, Infirmier en anesthésie.

Suite à une demande médicale de notre département d'anesthésie, Laurent, un

collègue infirmier anesthésiste et moi même, ayant tous 2 les connaissance

nécessaires, avons développer un site internet :

http://www.dar-saint-louis.fr

Nos connaissances se limitent à : xhtml/css/php/mysql

Or depuis le développement de ce site et d'un back office sécurisé pour en

gérer certaines parties, d'autre projet se greffent dessus.

Pour le moment je suis chargé d'un projet d'informatisation de consultations

d'anesthésie.

Or je suis confronté à un problème :

Sur certaines liste dans un formulaire, il doit être possible de pouvoir

ajouté des options qui s'enregistreront dans la liste et deviendrons

selectionnables.

Rien de vaut un exemple :

Liste Allergie :

Pollen

crustacé

pénicilline

.....

Autre

Il faudrait que si l'anesthésiste sélectionne "Autre", Un div s'affiche

permettant d'enregistrer les informations nécessaires dans la bdd (donc un

type d'allergie non présent dans la liste) et qu'une fois l'enregistrement

fait, il puisse retrouver dans la liste le nouvel enregistrement qu'il vient

de créer et le sélectionne.

Le tout sans recharger la page.

Sachant qu'il y aura beaucoup de liste de ce type dans cette page.

D'après les recherche que j'ai put faire, la solution viendrait d'AJAX.

Mais comme vous pouvez le deviner dans les compétence que nous possédons, il

n'y a ni l'AJAX, ni le java script.

Je dois donc avouer que je ne sais pas faire.

Malgrès pas mal de recherche, j'ai trouvé plein d'infos sur les listes et les

formulaires en ajax, avec notamment comment lier des listes ...

Mais hélas aucune infos sur ce que je souhaite faire.

Donc j'ai plusieurs question :

- Est-ce faisable (je pense que oui, mais bon on ne sait jamais) ?

- Est-ce que je m'oriente bien en cherchant du coté de AJAX pour la solution ?

- Avez vous des liens à me donner qui pourrais m'aider dans ce problème ?

- Éventuellement pouvez vous m'expliquer comment réaliser cet ajout en cas de

sélection de autre ?

Merci deja d'avoir lut ce long message.

Et merci d'avance de l'aide que vous pourrez m'apporter.

Cordialement

[Quarky]

Direction la sous-section Créa web

[jer666]

salut ajax peut etre une solution, il existes diverse librairie deja toute faite qui pourrait t'aider.

je travaille perso en ce moment sur celle de toolman qui est superbe et legere pour une fois

voici un exemple ui pourrait te ravir

http://tool-man.org/examples/edit-in-place.html

allez bon courrage

[gandalf76fr]

Je viens de très vite jeter un oeil à ton lien qui à l'air effectivement très intéressant.

Mais quand je parle de liste, je parle de liste selectionnables dans un formulaire (select et / option) dont les /options sont stockées dans une bdd et très nombreuses.

Donc je ne vois pas comment appliquer ce type d'expemple à ma problematique.

(bon j'avoue que la je vais manger à retourner au bloc donc je ne m'y suis pas penché très longtemps sur ce lien, peut etre que j'ai manqué quelque chose.)

P.S : DSL d'avoir posté au mauvais endroit, mici pour le déplacement.

[gandalf76fr]

Bon, je viens de me pencher un peu plus sur le lien que vous venez de me donner.

Et si je comprend bien, il utilise beaucoup le javascript.

Helas, comme précisé dans mon premier message, je suis pas mauvais en html/css/php/mysql mais totalement ignare en terme de javascript.

Ce projet n'est pas super urgent, mais devrait etre réalisé d'ici la fin de l'année.

Et vu les autres projets en cours (notement publications de documents, redactions de protocoles...) en plus du travail courant en salle de reveil, je me voit mal d'ici la aprendre "tout javascript pour les nuls" .

Donc pourriez vous SVP, me donenr des piste de recherche genre les commandes dont j'aurais besoin en java....

Voir si cela n'est pas trop demander (je sais j'abuse, dsl) me donner un petit exemple de code illustrant ce que je veux faire.

En tout cas, je vous remercie d'avance de toute l'aide que vous pourrez m'apporter.

[jer666]

ben tu n'as pas tord en disant qu'ajax remplirait les fonctions que tu desire, mais ajax c'est en autre du javascript ;-)

si tu regarde mieu le lien tu te rendra compte que le poids du javascript ne depasse pas (une fois extrait hein) 25/30ko ce qui est exceptionnel pour ce type de librairire.

L'utilisation ne te demande pas de mettre la main dans le js, mais dans le html ou le php

en effet les zones deplacable et mmodifiable sont en fait dirriger par des <li> et <ul> aprés tu y met ce que tu veux, comme par exemple un formulaire ...

sinon je ne dois pas avoir compris ce que tu fveux faire... je pensais qu'en gros tu desiré faire un truc comme netvibes, creation de bloc personnalisable grace a php. si c'est bien, ca regarde un peu mieu le lien sinon donne un piti exemple

[gandalf76fr]

en gros sur une liste de formulaire du type :

<select id="l1" name="l1" ">

<option value="1">Pomme</option>

<option value="2">Peche</option>

<option value="3">Poire</option>

<option value="-1">Autre...</option>

</select>

Si autre (value=-1) est selectionné, un champ text s'ouvre à coté et un bouton type=submit nommé "ajout".

Une fois le text entré dans le champ text, l'ajout doit etre inséré en bdd (insert mysql) et la liste rechargée.

Le tout sans recharger la page mais juste la liste.

On viens de me donner une piste avec java, mais j'arrive pas à faire traiter par php sans recharger la page

juste affichage, sans traitement bdd, voila ou j'en suis :

<html>
	<head>
			<script>
			function la_valeur_a_changer(sel) {
					if (sel.options[sel.selectedIndex].value == "-1") {
							document.getElementById('c1').style.display = 'inline';
					} else {
							document.getElementById('c1').style.display = 'none';
					}
			}
			window.onload = function() {
					document.getElementById('c1').style.display = 'none';
			}
			</script>
	</head>
	<body>
			<select id="l1" name="l1" onchange="la_valeur_a_changer(this)">
					<option value="1">Pomme</option>
					<option value="2">Peche</option>
					<option value="3">Poire</option>
					<option value="-1">Autre...</option>
			</select>
			<input type="text" name="c1" id="c1" />
<?php

if ($_REQUEST['l1'] == '-1') {
  //On a selectionné "autre"
  //On crée alors une nouvelle valeur pour la liste l1
  //Et on récupère son identifiant.
  //Dans notre exemple c'est 4 car 
  //  Pomme = 1, Peche = 2, Poire = 3
  $l1 = ($_REQUEST['c1']);
} else {
  //On a selectionné une valeur existante
  //Dans notre exemple 1, 2 ou 3
  $l1 = $_REQUEST['l1'];
}

//A ce niveau $l1 contient l'identifiant de la valeur
// sélectionnée (éventuellement crée) par l'utilisateur
echo '<br />';
echo '<br />';
echo '<br />';
echo '<br />';
echo "$l1";
echo "$c1";

?>
	</body>
</html>

mici d'avance de l'aide que vous pourrez m'apporter.

[jer666]

salut, je sais aps si ca peut t'aider, mais regarde sur ce lien

http://www.toutjavascript.com/main/search....108&debut=0

ya un truc qui s'appelle ajouter et supprimer des elements d'une liste

[gandalf76fr]

Bonjour,

Voila avec un brin de javascript, et beaucoup d'aide pour ce brin de java, la solution approche :

<html>
	<head>
			<script>
			function la_valeur_a_changer(sel) {
					if (sel.options[sel.selectedIndex].value == "-1") {
							document.getElementById('c1').style.display = 'inline';
					} else {
							document.getElementById('c1').style.display = 'none';
					}
			}
			window.onload = function() {
					document.getElementById('c1').style.display = 'none';
			}
			</script>
	</head>
	<body>
	<?php
	require('xxx.php');
	mysql_select_db($xxx,$xxx) or die('erreur de selection'.mysql_error());

			echo '<form action="test.php" enctype="multipart/form-data" method="post">';
			echo '<select value="" id="l1" name="l1" onChange="la_valeur_a_changer(this)">';
			echo '<option value="0"></option>';
			echo '<option value="-1">Autre...</option>';
			$sql='SELECT * FROM `add_menu` ORDER BY `menu` ASC ';
			$req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
			while ($ligne=mysql_fetch_array($req))
	{
	$id=addslashes($ligne['id']);
	$menu=addslashes($ligne['titre']);
	echo '<option value="'.$ligne['id'].'">'.$ligne['menu'].'</option>';
	}
			echo '</select>';
			echo '<input type="text" name="c1" id="c1" />';
	echo '<input type="submit" name="Valider" value="Valider" />';
	echo '</form>';
			 ?>
<?php

if ($_REQUEST['l1'] == '-1') {
  //On a selectionné "autre"
  //On crée alors une nouvelle valeur pour la liste l1
  //Et on récupère son identifiant.
  //Dans notre exemple c'est 4 car 
  //  Pomme = 1, Peche = 2, Poire = 3
  $menu = ($_REQUEST['c1']);
  $menu = addslashes($menu);
  $sql="insert into add_menu(id,menu) values('','".$menu."')";
  $req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
} else {
  //On a selectionné une valeur existante
  //Dans notre exemple 1, 2 ou 3
  $l1 = $_REQUEST['l1'];
}

//A ce niveau $l1 contient l'identifiant de la valeur
// sélectionnée (éventuellement crée) par l'utilisateur
echo '<br />';
echo '<br />';
echo '<br />';
echo '<br />';
echo "$l1";
echo "$c1";

?>
	</body>
</html>

http://www.dar-saint-louis.fr/test.php

En fait, javascript, s'occupe de toutes les variables, et je les envoie en bdd, apres le tratement de la page.

Bon me reste plus qu'a voir un script d'autocomplétion, pour faciliter l'utilisation de ces longues listes.