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

Version imprimable

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:

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.

essaye :

Code:

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

16/03/2010, 13h20
yann123456
Citation:
Envoyé par SpaceFrog

essaye :

Code:

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.
16/03/2010, 13h24
SpaceFrog

on peut voir le code html du form ???

Citation:

Envoyé par SpaceFrog

on peut voir le code html du form ???

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

16/03/2010, 13h32
SpaceFrog
Code:

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

=>
Code:

1 2 3 var l1 =document.forms['form_selects'].elements["list1"]; var l2 = document.forms['form_selects'].elements["list2"];
16/03/2010, 13h37
yann123456

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

essaye:

Code:

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

16/03/2010, 14h32
yann123456

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.

Code:

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

Code:

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

16/03/2010, 14h50
yann123456
Citation:
Envoyé par SpaceFrog

Code:

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

Code:

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.

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:

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:

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);
 
	}
}

16/03/2010, 16h03
SpaceFrog

pourquoi faire deux fonctions xhr ???

fais en une seule et passe les elements en paramètre ...
17/03/2010, 16h58
yann123456

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.