Liste déroulante avec possibilité saisie

Résolu/Fermé

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 - 3 août 2012 à 12:23
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 26 avril 2013 à 20:55

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:

Html liste déroulante avec saisie
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Editeur html - Télécharger - HTML
Supprimer liste déroulante excel - Forum Excel
Supprimer une liste déroulante - Forum Word

13 réponses

Réponse 1 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 5/08/2012 à 17:35

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']; 
}

Réponse 2 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
7 août 2012 à 21:46

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>';

Réponse 3 / 13

mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
3 août 2012 à 13:42

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+

Réponse 4 / 13

UgglyBoy Messages postés 422 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 30 mai 2015 64
3 août 2012 à 23:22

l'idéal avec un

<datalist>

mais c'est seulement supporté par FF :/

sinon tu fais tout en javascript comme sur google.com

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

Posez votre question

Réponse 5 / 13

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
4 août 2012 à 11:56

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 .....

Réponse 6 / 13

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
6 août 2012 à 11:50

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" ?

Réponse 7 / 13

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
Modifié par t671 le 9/08/2012 à 18:49

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 ......

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
9 août 2012 à 19:02

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 ?

Réponse 8 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
10 août 2012 à 09:58

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"/>';

Réponse 9 / 13

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
10 août 2012 à 10:19

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>';
?>

Réponse 10 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
10 août 2012 à 13:15

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 () !!!!!

Réponse 11 / 13

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
10 août 2012 à 16:50

Effectivement ! Maintenant ça fonctionne parfaitement !!!
Je te remercie beaucoup ....... ;o))
A ++

Réponse 12 / 13

Kawa28500
26 avril 2013 à 15:00

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>

Réponse 13 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
26 avril 2013 à 20:55

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

Discussions similaires

Suppression listes déroulantes

Accéder à la liste de numéros de téléphone en 07

Annuaire inversé liste rouge

Supprimer liste déroulante Excel

Je n' arrive pas a activer la saisie vocale

Discussions similaires

Newsletters