Ecrire dans un select

**nandofive** · 24/10/2007, 16h38

Bonjour,

Je souhaiterai faire un formulaire avec un select ou on puisse écrire comme on peut trouver dans la barre de google. liste définie ou possibilité de rajouter une option si le choix de l'internaute ne figure pas dans la liste.

Est-ce possible ?

Pour visualiser ce que je demande :

http://img98.imageshack.us/img98/2882/googlexz5.png

Merci d'avance

**djoyeux** · 24/10/2007, 17h19

Pas avec les balise HTML standard.

Peut-être avec du javascript mais la je connais pas trop.

**cadoudal56** · 24/10/2007, 17h45

Hello,

Effectivement tu dois passer par du javascript.
Voici un bout de code tout fait.
Je te laisse te débrouiller pour l'adapter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="JavaScript" type="text/javascript">
function add() {
document.edi.category.options[document.edi.category.options.length] = new Option(document.edi.newcat.value,document.edi.newcat.value);
document.edi.newcat.value = '';
}
</script>
 
<select name="category">
<option value="0">---Categorie---</option>
</select>
<input type="text" size="15" name="newcat"><input type="button" onclick="javascript:add();" value="Ajouter">

Tu verras ce n'est pas très compliqué.
Si tu fais juste un copier coller dans ta page cela devrait fonctionner

@+
cadou

**E.Bzz** · 24/10/2007, 18h14

Bonjour,

Envoyé par cadoudal56

Effectivement tu dois passer par du javascript.
Voici un bout de code tout fait.
Je te laisse te débrouiller pour l'adapter :

Effectivement, c'est la bonne méthode

Quelques petites corrections de syntaxe quand même.
De plus, cadoudal56 a dû oublier que sa liste était dans un form

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function add() {
var objListe = document.getElementById('category');
var valTxt = document.getElementById('newcat').value;
objListe.options[objListe.options.length] = new Option(valTxt,valTxt);
valTxt = '';
}
</script>
 
<select name="category" id="category">
<option value="0">---Categorie---</option>
</select>
<input type="text" size="15" name="newcat" id="newcat"><input type="button" onclick="add();" value="Ajouter">

A+

**Auteur** · 24/10/2007, 19h11

bonjour,

Je ne sais pas si ça peut répondre à ton problème, mais voici un autre exemple ici :
http://www.developpez.net/forums/sho...42#post2100442

Je ne garantie pas que le code fonctionne sous tous les navigateurs.

**nandofive** · 25/10/2007, 17h10

Tout d'abord merci à vous pour vos réponses.

J'ai opter pour la solution de Auteur :

Comme vous pouvez le voir dans cette page :

http://www.eloquor.fr/mod/ixp_compos...e1/auxerre.php

Cela fonctionne mais j'ai maintenant un autre souci c'est que j'aimerai bien bien attribuer la même liste à plusieurs Input, mais lorsque je clic sur tous les inputs de ma page cela ne modifie que le premier. Je me doute que cela vient des fonctions en javascript mais je n'arrive pas à déterminer ce qu'il faut changer pour que la modification soit effectuer pour chaque input.

Faut-il écrire une fonction différente pour chaque Input ou peut-on attribuer le choix pour chaque Input avec une seule fonction.

**younid** · 25/10/2007, 18h23

Bonjour,

Tu dois donner un identifiant différent pour chacune de tes liste (idListe_1, idListe_2, etc...) et faire appel à tes fonctions en leur transmettant a chaque fois l'id de la liste à gérer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="gestionListe('idListe_1')"

Si tu as besoin de plus d'aide n'hésite pas a demander.
Bon courage.

**Auteur** · 25/10/2007, 20h31

la version de cadoudal56 est sans doute plus facile à mettre en place. Voici une variante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#inputChoix{
 display: none;
 margin: 20px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
function add() 
{
 var objListe = document.getElementById('category');
 var valTxt = document.getElementById('newcat').value;
 var opt = objListe.options[objListe.options.length-1];
 
 objListe.options[objListe.options.length-1] = new Option(valTxt,valTxt, false, false);
 objListe.options[objListe.options.length] = opt;
 document.getElementById('newcat').value = "";
}
 
function clicListe(obj)
{
 var choix = parseInt(obj.options[obj.selectedIndex].value)
 if (choix==-1)
 {
    document.getElementById('inputChoix').style.display = "block";
 }
 else
 {
    document.getElementById('inputChoix').style.display = "none";
 }
 
}
</script>
</head>
 
<body>
 
<form name="" method="post" action="" enctype="">
               <select id="category" onchange="clicListe(this)">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>
               <div id="inputChoix">
                    <input type="text" size="15" id="newcat" />
                    <input type="button" onclick="add();" value="Ajouter" />
               </div>
  </form>
 
</body>
 
</html>

**nandofive** · 26/10/2007, 18h41

Je viens de trouvez la solution à mon problème à 2h50 du matin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style type="text/css">
<!--
#inputChoix{
 display: none;
 margin: 20px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
function add() 
{
 var objListe = document.getElementById($name);
 var valTxt = document.getElementById('newcat').value;
 var opt = objListe.options[objListe.options.length-1];
 
 objListe.options[objListe.options.length-1] = new Option(valTxt,valTxt, false, false);
 objListe.options[objListe.options.length] = opt;
 document.getElementById('newcat').value = "";
}
 
function clicListe(obj)
{
 var choix = parseInt(obj.options[obj.selectedIndex].value)
 if (choix==-1)
 {
    document.getElementById('inputChoix').style.display = "block";
 }
 else
 {
    document.getElementById('inputChoix').style.display = "none";
 }
 
}
</script>
 
<form name="formfocus" method="post" action="" enctype="">
               <select name="category1" id="category1" onChange="clicListe(this), $name=this.id">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>            
               <select name="category2" id="category2" onChange="clicListe(this), $name=this.id">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>             
  </form>
 
                 <div id="inputChoix">
                    <input type="text" size="15" id="newcat" />
                    <input type="button" onClick="add();" value="Ajouter" />
               </div>

Vous pouvez testez ici http://www.eloquor.fr/script.php

**nandofive** · 19/11/2007, 16h41

Mon code fonctionne sur Firefox mais ne fonctionne pas sur IE. Il me dit que $name n'est pas défini. Quel est la différence entre firefox et IE ?

Merci d'avance.

Ecrire dans un select

JavaScript

Discussions similaires

Partager

Partager