Liste déroulante récupérer la valeur sans bouton et sans réactualiser la page

Version imprimable

28/06/2011, 18h31
benhsaien

Liste déroulante récupérer la valeur sans bouton et sans réactualiser la page

Bonjour,

J'ai une balise liste déroulante. Je voudrais quand je sélectionne une valeur, la récupérer sans bouton submit et sans actualiser la page, car si la page et actualisée la valeur de la liste déroulante va être initialisée.

merci d'avance !!!!
28/06/2011, 19h29
Bisûnûrs

Ca se fait en Javascript.
Cf la FAQ :
http://javascript.developpez.com/faq...amps#valSelect

Bonjour,
j'ai mis un exemple de ce genre mais s'amarche pas :

Code:

1
2
3
4
5
6
7
8
9
10
<select name='liste'>
<option>en cours</option>
<option>valider</option>
<option>annuler</option>
</select>	
 
<script langage="javascript">
var a=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text);
document.write(a);
</script>

Salut,

Essaie ceci...

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liste</title>
<script type="text/javascript">//<![CDATA[
        function update(){
                var elt,val,opt;
                elt=document.getElementById('list');
                val=elt.value;
                if(val!==''){
                        opt=elt.options[val].text;
                        alert('Vous avez sélectionnez l\'élement #'+val+' ('+opt+')');
                }
        }
//]]>
</script>
</head>
<body>
<form action="#" method="get">
	<p>
		<label for="list">Votre sélection :</label>
		<select name="list" id="list" onchange="update();">
			<option value="" selected="selected">Choisissez un élément</option>
			<option value="1">Air</option>
			<option value="2">Eau</option>
			<option value="3">Terre</option>
			<option value="4">Feu</option>
		</select>
	</p>
</form>
</body>
</html>

Merci Eric2a
mais je veux récupérer le valeur a travers php:

Code:

1
2
3
4
<?php 
$valeur= "<script type='text/javascript'>document.write(trace)</script>" ;
echo $valeur;
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">//<![CDATA[
	function update(){
		var elt,val,opt;
		elt=document.getElementById('list');
		val=elt.value;
		if(val!==''){
			opt=elt.options[val].text;
			//alert('Vous avez sélectionnez l\'élement #'+val+' ('+opt+')');
			var trace=opt;
		}
	}
//]]>
</script>

????

28/06/2011, 22h44
Bisûnûrs

Tu te fourvoies complètement là .. Le PHP est exécuté côté serveur, donc quand le code s'affiche côté client et que le Javascript est disponible, le PHP n'existe déjà plus depuis longtemps.
28/06/2011, 22h53
benhsaien

Oui je sais mais y'a t'il une solution ou astuce pour ce genre de cas ???
28/06/2011, 23h00
Bisûnûrs

AJAX.
28/06/2011, 23h04
benhsaien

ok je vais voir de cette coté et si t'a une exemple n'esite pas;)merci !!!
28/06/2011, 23h14
NoSmoking

Citation:

Envoyé par benhsaien

J'ai une balise liste déroulante. Je voudrais quand je sélectionne une valeur, la récupérer sans bouton submit et sans actualiser la page, car si la page et actualisée la valeur de la liste déroulante va être initialisée.

c'est en partie faux.

- Lorsque tu crées ta page pour la première fois tu choisis toi même de mettre une option en selected.
- Lors de la soumission il te suffit de récupérer via $_POST or $_GET la valeur de l'option sélectionnée
- Lors du renvoie de la page rien ne t'empêches de mettre en selected cette option...
http://php.developpez.com/cours/?pag...ge#formulaires
28/06/2011, 23h21
benhsaien

oui mais pour recupérer la valeur avec $_POST je doit avoir un button submit et c'est sa se que veux pas.je veu si il selectionne je la recupére.
28/06/2011, 23h27
NoSmoking

Citation:

Envoyé par benhsaien

oui mais pour recupérer la valeur avec $_POST je doit avoir un button submit et c'est sa se que veux pas.je veu si il selectionne je la recupére.

drôle d'idée !!
Tu peux également soumettre sur le onchange, mais je trouve cela moyen, donc regardes du coté de l'AJAX comme te la soumis Bisûnûrs
28/06/2011, 23h37
benhsaien

puisque j'ai jamais touché a ajax si vous pouver me donner un exemple je serait ravie !!!!!
28/06/2011, 23h42
NoSmoking

Les Cours
http://ajax.developpez.com/cours/
Les FAQs
http://javascript.developpez.com/faq...ipt/?page=Ajax
sans oublier le forum
http://www.developpez.net/forums/f23...eb/javascript/
fourmillent d'exemples...
28/06/2011, 23h44
benhsaien

merci NoSmoking
pour les manifique lien.mais question de contraint de temp plus je suis que passagére de ajax un exemple direct sa sera super.si c'est possible !!!!!

Avec les cookies.

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">//<![CDATA[
 
        function createCookie(name,value,days) {
                if (days) {
                        var date = new Date();
                        date.setTime(date.getTime()+(days*24*60*60*1000));
                        var expires = "; expires="+date.toGMTString();
                }
                else var expires = "";
                document.cookie = name+"="+value+expires+"; path=/";
        }
        function readCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for(var i=0;i < ca.length;i++) {
                        var c = ca[i];
                        while (c.charAt(0)==' ') c = c.substring(1,c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                }
                return null;
        }
        function eraseCookie(name) {
                createCookie(name,"",-1);
        }
 
        function update_Selection(){
                var v=document.getElementById('list').value;
                if(v)
                        createCookie('selectedValue',v);
                else
                        eraseCookie('selectedValue');
        }
 
        function init_Selection(){
                var v=readCookie('selectedValue');
                if(v)document.getElementById('list').options[v].selected=true;
        }
 
        window.onload=init_Selection;
//]]>
</script>
</head>
<body>
<form action="#" method="get">
	<p>
		<label for="list">Votre sélection :</label>
		<select name="list" id="list" onchange="update_Selection();">
			<option value="" selected="selected">Choisissez un élément</option>
			<option value="1">Air</option>
			<option value="2">Eau</option>
			<option value="3">Terre</option>
			<option value="4">Feu</option>
		</select>
	</p>
</form>
</body>
</html>

Voir :arrow: La gestion des cookies en JavaScript

29/06/2011, 08h51
nadox

Bonjour,

Citation:

Envoyé par benhsaien

Oui je sais mais y'a t'il une solution ou astuce pour ce genre de cas ???

Tu ne nous donne pas beaucoup de détails sur le cas...
Pourquoi veux tu récupérer une valeur sans recharger la page ? Que veux tu en faire ?
Si tu veux en faire quelque chose sur le serveur, il n'y a pas trop le choix : poster un formulaire ou envoyer la valeur en Ajax.
29/06/2011, 09h55
Bovino

Citation:

Envoyé par benhsaien

question de contraint de temp plus je suis que passagére de ajax un exemple direct sa sera super

Ben évidemment, nous on a que ça à faire de nos journées que de faire ton travail :aie:
29/06/2011, 10h11
benhsaien

Merci Eric2a.