[AJAX] Reprendre données select et les envoyer à php avec un REQUEST

Version imprimable

Bonjour. Je suis entrain de faire un programme me permettant, avec une base de donnée, de gérer un catalogue de matériel, des utilisateurs inscrits, et j'en passe.
Pour réaliser se projet j'ai décidé de faire plusieurs tests afin de comprendre correctement le mécanisme pour faire mes choix concernant les méthodes que je voudrait appliquer au projet.

J'ai réalisé plusieurs tests avec succès mais celui-ci me pose problème. J'aimerai faire une liste avec un <select> et un bouton. Ici j'aimerai envoyer l'information vers un serveur qui devrait savoir l'option du select que l'utilisateur a choisi et renvoyer un message en fonction du select choisi.

Voici la page HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type="text/javascript" src="child.js"></script> </head> <body> <table> <tr> <td> Materiel </td> <td> <select name="location" id="selection"> <option value="cam">Camera</option> <option value="mic">Micro</option> <option value="car">Mercedes</option> </select> </td> <td> </td> </tr> <tr><td><input type="button" onclick="trouver(this)" value="envoyer"/></td></tr> </table> </body>
Le code .js ( je n'ai pas repris dedans la fonction lançant Ajax )
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 function requete(data) { creationXH = creationXHR(); if (creationXH != null) { creationXH.open("post","child.php", true); creationXH.onreadystatechange = etatserveur; creationXH.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); creationXH.send(data); } else { alert(error); } } function etatserveur() { if(creationXH.readyState==4){ if(creationXH.status==200){ var matmat=creationXH.responseText; } } } function trouver() { var local = document.getElementsByTagName('select'); alert(local.length); var data = local.childNodes(); alert(data); requete(data); }
Voilà mon problème se trouve dans la fonction "trouver" j'aimerai pouvoir reprendre les donnée choisie dans le select. Pour les envoyer sur une page php avec un REQUEST enfin ça je verrai après.

Si vous avez une idée comment faire avancer ce projet n'hésitez pas. Merci d'avance pour votre aide.

Cordialement Julien.

07/02/2013, 14h39
Bovino
Code:

onclick="trouver(this)"

Pourquoi envoyer un paramètre qui n'est pas utilisé dans la fonction appelée ? :koi:
Code:

1 2 var local = document.getElementsByTagName('select'); var data = local.childNodes();
Comme son s l'indique, getElementsByTagName() renvoie une collection d'objets HTML. Or seul un élément HTML (et non une collection) possède une méthode childNodes().
Il faut donc préciser de quel élément dans la collection tu as besoin.
09/02/2013, 14h05
stojulien

Bonjour tout d'abord je m'excuse du retard de ma réponse.

Je vous remercie pour votre réponse.

Cependant je ne vois pas trop bien comment régler ce problème, je ne me suis lancé dans la programmation que récemment.

Donc si je comprend bien, dans "getElementByTagName", je doit reprendre les "option" à la place du "select" ?

un truc de ce genre ?

Code:

1
2
3
4
5
6
7
<select onchange="send(this.value);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
 
<div id="result"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function send(v){
  $.ajax({
    url: 'http://monsite.com/monapi/chilp.php?v='+v,
    success:function(data){
      $("#result").html(data);
    }/*,
    statusCode: {
      403 : function(){// Acces interdit 
      },
      404 : function(){// non trouvé 
      },
      408 : function(){// time out 
      },
      500 : function(){// erreur serveur 
      }
    }*/
  });
}

Bonjour merci pour votre aide j'ai finalement trouvé la solution

voici donc le code .js du moins ce qui faisait défaut dans mon premier post.

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
function etatserveur() {
	if(creationXH.readyState==4){
		if(creationXH.status==200){
			var matmat=creationXH.responseText;
			var ddiv = document.createElement('div');
ddiv.style.width="200";
ddiv.style.height="100px";
ddiv.style.backgroundColor="white";
ddiv.style.color="red";
ddiv.innerHTML = matmat;
document.body.appendChild(ddiv); 
		}
	}
}
 
 
 
 
function trouver() {	
var local = document.getElementsByTagName('option');
for(var i=0; i<local.length; i++) { 
	if (local[i].selected==true) {
 
var data = "materiel="+local[i].id;
data += "&"+local[i].id+"="+"oui";
	} 
}
 
requete(data);
}

Et si cela intéresse des personnes concernant ce script, voici ce que j'ai fait en php pour la récupération des donnée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
$donnee = "";
foreach($_REQUEST as $key=>$val) {
 
	$donnee .=$key." ".$val."< /br>";
 
	}
 
if ($key=='voiture'){
 
	echo $key.' Nous n avons pas cela';
 
	} else {
 
echo $donnee;
	}
 
?>

Merci encore pour vos réponses :)