Récupérer la selection d'un formulaire avec IE. [Résolu]

yann123456 · 16/03/2010, 13h04

Bonjour,

Je travaille sur un script en javascript Asynchrone.
Le but est la mise à jour d'une liste déroulante a partir de la sélection d'une première liste.
Mon test fonctionne bien avec firefox, safari et chrome, mais pas avec IE.

Voici la fonction qui me pose problème:

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
 
function request05(f) {
	var l1    = f.elements["list1"];
	var l2    = f.elements["list2"];
	var index = l1.selectedIndex;
	if(index < 1)
		l2.options.length = 0;
	else {
		var xhr_object = null;
 
		if(window.XMLHttpRequest) // Firefox
			xhr_object = new XMLHttpRequest();
		else if(window.ActiveXObject) // Internet Explorer
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		else { // XMLHttpRequest non supporté par le navigateur
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			return;
		}
 
		xhr_object.open("POST", "species.php", true);
 
		xhr_object.onreadystatechange = function anonymous() {
			if(xhr_object.readyState == 4)
				eval(xhr_object.responseText);
		}
 
		xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
		xhr_object.send(data);
 
		alert(l1.options[index].value);
 
	}
}

Avec cette fonction, j'exécute un fichier php pour mettre la deuxième liste à jour.
Je transmet donc des variables par l'intermédiaire de data.
Le problème est que IE ne transmet pas la valeur sélectionné dans la première liste.
J'ai ajouté " alert(l1.options[index].value); ", pour voir le contenu et pour IE ca ne m'affiche rien, pour les autres navigateurs la sélection est bien transmise.
Voyez-vous ou est le problème ?
Merci d'avance.

SpaceFrog · 16/03/2010, 13h09

essaye :

Code :

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

1
2
var l1    =document.forms['f'].elements["list1"];
var l2    = document.forms['f'].elements["list2"];

yann123456 · 16/03/2010, 13h20

Citation:

Envoyé par SpaceFrog

essaye :

Code :

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

1
2
var l1    =document.forms['f'].elements["list1"];
var l2    = document.forms['f'].elements["list2"];

Non, comme cela ca ne marche plus sur aucun navigateur.

SpaceFrog · 16/03/2010, 13h24

on peut voir le code html du form ???

yann123456 · 16/03/2010, 13h30

Citation:

Envoyé par SpaceFrog

on peut voir le code html du form ???

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="test.js"></script>
</head>
 
<body onLoad="request04(form_selects)">
 
	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Faites un choix dans la liste de gauche et observez le résultat dans celle de droite</legend>
			<div class="Left">
 
			<label for="marque">Famille: </label>
			<select name="list1" id="list1" class="ButtonL" onchange="request05(this.form)">
			</select>
 
			<label for="marque">Espèces: </label>
			<select name="list2" id="list2" class="ButtonL">
			</select>
 
			</div>
		</fieldset>
	</form>
 
</body>
</html>

SpaceFrog · 16/03/2010, 13h32

Code :

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

<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">

=>

Code :

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

1
2
3
 
var l1    =document.forms['form_selects'].elements["list1"];
var l2    = document.forms['form_selects'].elements["list2"];

yann123456 · 16/03/2010, 13h37

Ça ne fonctionne toujours pas sous IE (les autres ok).

SpaceFrog · 16/03/2010, 14h17

essaye:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  if(window.XMLHttpRequest) // Firefox et autres
               xhr = new XMLHttpRequest();
            else if(window.ActiveXObject){ // Internet Explorer
               try {
                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
               xhr = false;
            }

yann123456 · 16/03/2010, 14h32

J'ai remplacé "xhr" par "xhr_object", dans le bout de code que vous m'avez donné, pour que ce soit cohérent avec le reste.

Mais, toujours pareil, ca ne marche pas sous IE.

SpaceFrog · 16/03/2010, 14h38

Code :

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

<body onload="request04('form_selects')">

Code :

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

1
2
3
4
function request05(myform) {
 	f=document.forms[myform]
        var l1    = f.elements["list1"];
	var l2    = f.elements["list2"];

yann123456 · 16/03/2010, 14h50

Citation:

Envoyé par SpaceFrog

Code :

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

<body onload="request04('form_selects')">

Code :

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

1
2
3
4
function request05(myform) {
 	f=document.forms[myform]
        var l1    = f.elements["list1"];
	var l2    = f.elements["list2"];

Je ne comprends ce que vous voulez que j'essaie, request04 est une autre fonction qui marche sur tous les navigateurs. Elle ne récupère aucune info du formulaire donc elle fonctionne sur tous les navigateurs.

Je travaille à partir de ce topic: http://robloche.free.fr/javascript/t.../tuto_xhr.html (partie 5), pourtant le script de cette page fonctionne sous IE!!! c'est la même chose.

Edit: J'ai fais la modif, toujours pareil, marche pas sous IE.

yann123456 · 16/03/2010, 15h19

J'ai apparemment un conflit entre mes deux fonctions avec IE.
request04('form_selects') créé la première liste déroulante.
J'ai supprimé cette fonction et crée une liste déroulante html à la place et la, la deuxième liste ce met à jour sur tous les navigateurs (même IE).
C'est pourquoi je pense qu'il y a un conflit sous IE entre mes deux fonctions.

Voici donc le code complet avec les deux fonctions (désolé, je ne pensais pas que cela pouvait venir de la)

Le html du formulaire:

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="test.js"></script>
</head>
 
<body onLoad="request04(form_selects)">
 
	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Faites un choix dans la liste de gauche et observez le résultat dans celle de droite</legend>
			<div class="Left">
 
			<label for="marque">Famille: </label>
			<select name="list1" id="list1" class="ButtonL" onchange="request05(this.form)">
			</select>
 
			<label for="marque">Espèces: </label>
			<select name="list2" id="list2" class="ButtonL">
			</select>
 
			</div>
		</fieldset>
	</form>
 
</body>
</html>

Et les deux fonctions:

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
62
63
64
65
66
67
68
69
 
function request04(f) {
 
	var xhr_object = null;
 
	if(window.XMLHttpRequest) // Firefox
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // Internet Explorer
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return;
	}
 
	xhr_object.open("POST", "family.php", true);
 
	xhr_object.onreadystatechange = function anonymous() {
		if(xhr_object.readyState == 4)
			eval(xhr_object.responseText);
	}
 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	var data = "form="+f.name+"&select=list1";
	xhr_object.send(data);
}
 
 
function request05(myform) {
 
	f=document.forms[myform];
 
	var l1    = myform.elements["list1"];
	var l2    = myform.elements["list2"];
	var index = l1.selectedIndex;
	if(index < 1)
		l2.options.length = 0;
	else {
		var xhr_object = null;
 
		if(window.XMLHttpRequest) // Firefox et autres
               xhr_object = new XMLHttpRequest();
            else if(window.ActiveXObject){ // Internet Explorer
               try {
                         xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
               xhr_object = false;
            }
 
 
		xhr_object.open("POST", "species.php", true);
 
		xhr_object.onreadystatechange = function anonymous() {
			if(xhr_object.readyState == 4)
				eval(xhr_object.responseText);
		}
 
		xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		var data = "family="+escape(l1.options[index].value)+"&form="+myform.name+"&select=list2";
		xhr_object.send(data);
 
		alert(l1.options[index].value);
 
	}
}

SpaceFrog · 16/03/2010, 16h03

pourquoi faire deux fonctions xhr ???

fais en une seule et passe les elements en paramètre ...

yann123456 · 17/03/2010, 16h58

J'ai tous repris depuis le début à partir de ce document:
http://siddh.developpez.com/articles/ajax/#LIV-A

Mon test fonctionne, je n'ai plus qu'a l'adapter à mon projet.

Merci de vos réponses.

16/03/2010, 13h24	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 075 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 075 Points : 43 303 Points : 43 303	on peut voir le code html du form ??? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/03/2010, 13h37	#7
yann123456 Membre du Club Inscription : février 2008 Messages : 137 Détails du profil Informations forums : Inscription : février 2008 Messages : 137 Points : 45 Points : 45	Ça ne fonctionne toujours pas sous IE (les autres ok).
	00

16/03/2010, 14h32	#9
yann123456 Membre du Club Inscription : février 2008 Messages : 137 Détails du profil Informations forums : Inscription : février 2008 Messages : 137 Points : 45 Points : 45	J'ai remplacé "xhr" par "xhr_object", dans le bout de code que vous m'avez donné, pour que ce soit cohérent avec le reste. Mais, toujours pareil, ca ne marche pas sous IE. Dernière modification par yann123456 ; 16/03/2010 à 14h51.
	00

16/03/2010, 16h03	#13
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 075 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 075 Points : 43 303 Points : 43 303	pourquoi faire deux fonctions xhr ??? fais en une seule et passe les elements en paramètre ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2010, 16h58	#14
yann123456 Membre du Club Inscription : février 2008 Messages : 137 Détails du profil Informations forums : Inscription : février 2008 Messages : 137 Points : 45 Points : 45	J'ai tous repris depuis le début à partir de ce document: http://siddh.developpez.com/articles/ajax/#LIV-A Mon test fonctionne, je n'ai plus qu'a l'adapter à mon projet. Merci de vos réponses.
	00

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