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

**stojulien** · 07/02/2013, 14h23

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

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

**Bovino** · 07/02/2013, 14h39

Code :

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

onclick="trouver(this)"

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

Code :

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

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.

**stojulien** · 09/02/2013, 14h05

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

**Dr.Who** · 16/02/2013, 03h59

un truc de ce genre ?

Code html :

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

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

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

**stojulien** · 18/02/2013, 09h08

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 :

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

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

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

AJAX

Discussions similaires

Partager

Partager