Liste déroulante avec possibilité saisie

Résolu
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   -  
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je veux créer une liste déroulante qui permettra de choisir une des ligne désirée 
$select = 'SELECT * FROM lieux ORDER BY lieu ASC'; 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );

while($row = mysql_fetch_array($result)) 
    {	
    	echo '<SELECT name="lieu_naissance">';
		echo '<OPTION VALUE="X"></OPTION>';	
		echo '<OPTION VALUE="naissance">'.$row['lieu'].'</OPTION>';
		echo '</SELECT>';
	}


Si aucun choix de la liste ne convient, je veux avoir la possibilité de saisir une nouvelle entrée dans la liste (première ligne de la liste déroulante VALUE="X") qui sera ensuite enregistré dans la base.
Mais comme c'est écrit, je n'arrive pas à saisir ...... !
Comment faire ?
Merci.
A voir également:

13 réponses

Réponse 1 / 13
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
voir commentaires et solution: 
<?php 
$select = 'SELECT * FROM lieux ORDER BY lieu ASC';  
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() ); 

while($row = mysql_fetch_array($result))  

    {  
     echo '<SELECT name="lieu_naissance">'; 
  echo '<OPTION VALUE="X"></OPTION>';  
  echo '<OPTION VALUE="naissance">'.$row['lieu'].'</OPTION>'; 
  echo '</SELECT>'; 
 } 
 /* 
  
 REMARQUES: 
 tel que ton code est fait avec les balise <select de la liste dans la boucle while tu va avoir autant de listes que de résultast de ta requette 
 et toutes avec le même name donc pb lors de la recupération dan $_POST 
  
 */ 
  
?>  

//une solution avec du javascript qui va rajouter l'input seulement si tu choisit "autre" dans la liste 
<html> 
<head> 
<script type="text/javascript"> 
function ajout_input(){ 
 //lecture du choix dans la liste suite au onchange (liste atteinte par son id ) 
 var choix_naissance=document.getElementById('lieu_naissance').value; 
 if(choix_naissance =='autre'){ 
  //on rajoute l'input dans le div par un innerHTML 
  document.getElementById('div_input_autre').innerHTML='Precisez:<input type="texte" name="lieu_naissance_autre" id="lieu_naissance_autre" value="" />';
 document.getElementById('lieu_naissance_autre').focus(); //et on lui donne le focus
 }else{ 
  document.getElementById('div_input_autre').innerHTML=''; //sinon on efface l'input eventuellement affiché 
 } 
} 

</script> 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<?php 
$select = 'SELECT * FROM lieux ORDER BY lieu ASC';  
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() ); 
//balise en minuscule et rajout de l'id et du onchange pour appel de la fonction javascript 
//et balise <select en dehors de la noucle while 
echo '<select name="lieu_naissance" id="lieu_naissance" onchange="ajout_input();">';  
echo '<option value="autre">--choisissez--</option>'; // ligne obligatoire pour avoir un changement a tous les coups 
while($row = mysql_fetch_array($result))  
    {  
  echo '<option value="'.$row['lieu'].'">'.$row['lieu'].'</option>'; 
   
 } 
echo '</select>'; 
echo '<div id="div_input_autre"></div>'; //div ou sera rajouté l'input par javascript 
?> 

//et dans le script de récupération: 

<?php 

if($_POST['lieu_naissance']== "autre"){ 
 $lieu_naissance=$_POST['lieu_naissance_autre']; 
}else{ 
 $lieu_naissance=$_POST['lieu_naissance']; 
}
2
Réponse 2 / 13
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
ok j'ai fait une petite erreur: 

echo '<select name="lieu_naissance" id="lieu_naissance" onchange="ajout_input();">';  
echo '<option value="">--choisissez--</option>'; // ligne obligatoire pour avoir un changement a tous les coups 
while($row = mysql_fetch_array($result))  
    {  
  echo '<option value="'.$row['lieu'].'">'.$row['lieu'].'</option>'; 
   
 } 
 echo '<option value="autre">Autre</option>';
echo '</select>';
2
Réponse 3 / 13
mpmp93 Messages postés 6648 Date d'inscription   Statut Membre Dernière intervention   1 340
 
Bonjour,

Avec SELECT et OPTION seul c'est pas possible.

la solution est de rajouter après </select>

un champ <input.............../>

dont vous testerez le contenu au moment de traiter le formulaire:
- si input vide, prendre en compte la valeur sélectionnée
- si input pas vide, prendre en compte valeur de input

A+
0
Réponse 4 / 13
UgglyBoy Messages postés 426 Date d'inscription   Statut Membre Dernière intervention   64
 
l'idéal avec un 
<datalist>

mais c'est seulement supporté par FF :/

sinon tu fais tout en javascript comme sur google.com
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
Je vais faire comme mpmp93 le dit. Mais c'est dommage, car cela me fait une zone de saisie + une liste déroulante. J'aurais préféré tout mettre ensemble. Dommage que "datalist" n'est pas compatible avec IE. Et le faire en javascript, je ne sais pas .....
0
Réponse 6 / 13
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
Merci Alain_42 ...... ;o)
Pour ta première remarque, j'avais effectivement vu que je devais sortir le SELECT de la boucle WHILE.
Pour ta solution en javascript, il faut d'abord sélectionner un lieu, puis sélectionner "choisissez" pour que le cadre "Précisez" apparaisse.
Y a t'il possibilité de faire la nouvelle saisie qui écraserait le mot "choisissez" ?
0
Réponse 7 / 13
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
Bonjour Alain_42,
Effectivement, ça fonctionne génial !!!!!!! ;o)

Par contre, encore une question :
Là, je peux choisir ou saisir un lieu de naissance.
Si sur la même page je veux pouvoir choisir ou saisir un lieu de décès ?
J'ai essayé plusieurs façons pour modifier le javascript, mais je n'y arrive pas ......
0
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
J'ai ajouté une 2° function : 

function ajoutdc_input(){
 var choix_dc=document.getElementById('lieu_dc').value; 
 if(choix_dc =='autre'){ 
  //on rajoute l'input dans le div par un innerHTML 
  document.getElementById('div_inputdc_autre').innerHTML='<font size="2" color="red">Précisez : Ville, cp, Département, PAYS</font>&nbsp;<input type="texte" name="lieu_dc_autre" id="lieu_dc_autre" value="" size="55"/>';
 document.getElementById('lieu_dc_autre').focus(); //et on lui donne le focus
 }else{ 
  document.getElementById('div_inputdc_autre').innerHTML=''; //sinon on efface l'input eventuellement affiché 
 } 
}

Mais c'est toujours la première qui est prise en compte.
Pourquoi ?
0
Réponse 8 / 13
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
tu veux dire c'est toujours la première fonction qui est prise en compte ?

as tu bien mis pour la deuxième liste déroulante: 

echo '<select name="lieu_dc" id="lieu_dc" onchange="ajoutdc_input();">';


et attention type="text" 

//on rajoute l'input dans le div par un innerHTML 
  document.getElementById('div_inputdc_autre').innerHTML='<font size="2" color="red">Précisez : Ville, cp, Département, PAYS</font>&nbsp;<input type="text" name="lieu_dc_autre" id="lieu_dc_autre" value="" size="55"/>';
0
Réponse 9 / 13
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
Merci de m'avoir répondu Alain_42.
J'ai vérifié par rapport à ce que tu me dis : j'ai corrigé pour "onchange="ajoutdc_input();">" et le type="text" et non "texte".
Mais la deuxième function ne fonctionne toujours pas. Si je veux saisir un autre lieu pour dc, je n'ai pas la ligne "Précisez : ....." qui s'affiche. 

<script type="text/javascript"> 
function ajout_input(){ 
 //lecture du choix dans la liste suite au onchange (liste atteinte par son id ) 
 var choix_naissance=document.getElementById('lieu_naissance').value; 
 if(choix_naissance =='autre'){ 
  //on rajoute l'input dans le div par un innerHTML 
  document.getElementById('div_input_autre').innerHTML='<font size="2" color="red">Précisez : Ville, cp, Département, PAYS</font>&nbsp;<input type="texte" name="lieu_naissance_autre" id="lieu_naissance_autre" value="" size="55"/>';
 document.getElementById('lieu_naissance_autre').focus(); //et on lui donne le focus
 }else{ 
  document.getElementById('div_input_autre').innerHTML=''; //sinon on efface l'input eventuellement affiché 
 } 
}

 function ajout2_input(){
 var choix_dc=document.getElementById('lieu_dc').value; 
 if(choix_dc =='autre'){ 
  document.getElementById('div_inputdc_autre').innerHTML='<font size="2" color="red">Précisez : Ville, cp, Département, PAYS</font>&nbsp;<input type="text" name="lieu_dc_autre" id="lieu_dc_autre" value="" size="55"/>';
 document.getElementById('lieu_dc_autre').focus(); 
 }else{ 
  document.getElementById('div_inputdc_autre').innerHTML='';  
 } 
}
</script>

et dans mon code php : 
$select = 'SELECT * FROM lieux ORDER BY lieu ASC'; 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );

echo '<tr align="left"><td>Lieu de naissance : </td>';
echo '<td>';
echo '<select name="lieu_naissance" id="lieu_naissance" onchange="ajout_input();">';  
echo '<option value="autre">--choisissez--</option>'; // ligne obligatoire pour avoir un changement a tous les coups 
echo '<option style="color:red;" value="autre">Saisie d\'un autre lieu</option>';
while($row = mysql_fetch_array($result))  
{  
  echo '<option value="'.$row['lieu'].'">'.$row['lieu'].'</option>'; 
} 
echo '</select>'; 
echo '</td></tr>';
echo '<tr><td width="350"></td><td>';
echo '<div id="div_input_autre"></div>'; //div ou sera rajouté l'input par javascript 
echo '</td></tr>';
?>

plus bas, après du code html 
$select = 'SELECT * FROM lieux ORDER BY lieu ASC'; 
$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );

echo '<tr align="left"><td>Lieu de décès : </td>';
echo '<td>';
echo '<select name="lieu_dc" id="lieu_dc" onchange="ajoutdc_input();">';  
echo '<option value="autre">--choisissez--</option>'; 
echo '<option style="color:red;" value="autre">Saisie d\'un autre lieu</option>';
while($row = mysql_fetch_array($result))  
{  
  echo '<option value="'.$row['lieu'].'">'.$row['lieu'].'</option>'; 
} 
echo '</select>'; 
echo '</td></tr>';
echo '<tr><td width="350"></td><td>';
echo '<div id="div_inputdc_autre"></div>'; 
echo '</td></tr>';
?>
0
Réponse 10 / 13
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
un petit manque d'attention:

tu nomme ta fonction dans javascript:
function ajouter2_input()

et dans ta liste dc tu appelles la fonction ajouterdc_input () !!!!!
0
Réponse 11 / 13
t671 Messages postés 1476 Date d'inscription   Statut Membre Dernière intervention   11
 
Effectivement ! Maintenant ça fonctionne parfaitement !!!
Je te remercie beaucoup ....... ;o))
A ++
0
Réponse 12 / 13
Kawa28500
 
J'ai actuellement réaliser votre exemple adapter pour mon code et le soucis et lorsque je selectionne "Autre" rien ne se passe...

<head>

<script type="texte/javascript">
function ajout_input()
{
var choix_taille =document.getElementById('TAILLE').value;
if(choix_taille =='autre')
{
document.getElementById('div_input_autre').innerHTML ='<input type="text" name="taille_autre" id="taille_autre" value="'.stripslashes($TAILLE).'" size="10" class="texte_formulaire"/>';
document.getElementById('taille_autre').focus();
}
else
{
document.getElementById('div_input_autre').innerHTML ='';
}
}
</script>

</head>



/*=========================================
==========================================

<body>


$TAILLE=("SELECT TAILLE FROM TAILLE");
$result=mysql_query($TAILLE) or die ("Requete pas compris");
echo '<p><label for="nom"><span class="texte_formulaire">Taille demandée (Go)</span></br></label>

<SELECT name="TAILLE" id="TAILLE" onchange="ajout_input();">';

echo '<option value="" selected>--Choisissez--</option>';
while($row=mysql_fetch_array($result))
{
echo"<option>$row[0]</option>";
}
echo'<option value="autre">Autre</option>';
echo '</SELECT>';
echo'<div id="div_input_autre"></div>';

</body>
0
Réponse 13 / 13
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
deux énormes erreurs:

- tu mets du php dans le code javascript:
value="'.stripslashes($TAILLE).'"

et de plus cette variable $TAILLE ne contient que le texte de la requette
$TAILLE=("SELECT TAILLE FROM TAILLE");


et penses aussi à mettre autre chose comme nom de base de table de variable que taille
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
Supprimer Liste déroulante
Good -
Good -

2 réponses