Liste déroulante récupérer la valeur sans bouton et sans réactualiser la page [Résolu]

benhsaien · 28/06/2011, 18h31

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

Bisûnûrs · 28/06/2011, 19h29

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

benhsaien · 28/06/2011, 22h02

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

Code :

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

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>

Eric2a · 28/06/2011, 22h21

Salut,

Essaie ceci...

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

benhsaien · 28/06/2011, 22h32

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

Code :

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

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

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">//<![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>

????

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

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.

benhsaien · 28/06/2011, 22h53

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

Bisûnûrs · 28/06/2011, 23h00

AJAX.

benhsaien · 28/06/2011, 23h04

ok je vais voir de cette coté et si t'a une exemple n'esite pas

merci !!!

NoSmoking · 28/06/2011, 23h14

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

benhsaien · 28/06/2011, 23h21

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.

NoSmoking · 28/06/2011, 23h27

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

benhsaien · 28/06/2011, 23h37

puisque j'ai jamais touché a ajax si vous pouver me donner un exemple je serait ravie !!!!!

NoSmoking · 28/06/2011, 23h42

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

benhsaien · 28/06/2011, 23h44

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

Eric2a · 29/06/2011, 00h12

Avec les cookies.

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

La gestion des cookies en JavaScript

nadox · 29/06/2011, 08h51

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.

Bovino · 29/06/2011, 09h55

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

benhsaien · 29/06/2011, 10h11

Merci Eric2a.

28/06/2011, 18h31	#1
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	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 !!!!
	00

28/06/2011, 23h04	#9
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	ok je vais voir de cette coté et si t'a une exemple n'esite pasmerci !!!
	00

28/06/2011, 19h29	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Ca se fait en Javascript. Cf la FAQ : http://javascript.developpez.com/faq...amps#valSelect
	00

28/06/2011, 22h44	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

28/06/2011, 22h53	#7
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	Oui je sais mais y'a t'il une solution ou astuce pour ce genre de cas ???
	00

28/06/2011, 23h00	#8
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	AJAX.
	00

28/06/2011, 23h21	#11
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	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.
	00

28/06/2011, 23h37	#13
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	puisque j'ai jamais touché a ajax si vous pouver me donner un exemple je serait ravie !!!!!
	00

28/06/2011, 23h42	#14
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 774 Points : 4 774	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...
	00

28/06/2011, 23h44	#15
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	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 !!!!!
	00

29/06/2011, 10h11	#19
benhsaien Membre du Club Analyse système Inscription : mars 2011 Messages : 406 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Analyse système Informations forums : Inscription : mars 2011 Messages : 406 Points : 67 Points : 67	Merci Eric2a.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email