Bonjour,

Je développe une page avec une liste déroulante qui contient des produits et une zone de texte (désactivée) dans laquelle le prix du produit doit être affiché.

AJAX intervient au moment où on sélectionne un item de la liste, la zone de texte affiche alors le prix correspondant.

Le formulaire contient un bouton qui permet d'ajouter d'autres listes déroulantes et zones de texte. Suite à un autre post sur le forum, j'ai choisi de dupliquer la ligne au moyen de cloneNode (fonction ajouter() dans le fichier php).

Or la fonction affich_prix() qui fait appel à AJAX ne fonctionne que pour les premiers éléments de formulaire (atteints par leur id). Il faudrait donc que ma fonction "connaisse" l'id de la liste pour laquelle on vient de sélectionner un item. J'avais pensé passer this.id en paramètre de la fonction appelée via onchange, et passer cet argument aux getElementById, mais ça ne fonctionne pas.

Voici les différents codes.
La page php sans ma tentative de this.id
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>cloneNode</title>
</head>
 
<body>
 
<script>
	var lineIndex=0;
	function ajouter() {
		// au clic sur le boutton on ajoute une ligne de formulaire semblable à la première
		ligne = document.getElementById("line0").cloneNode(true);
		ligne.id="line"+(++lineIndex);
		document.getElementById("a_remplir").appendChild(ligne);
		// on modifie les names et id des éléments ajoutés
		leNewSelect = document.getElementById(ligne.id).getElementsByTagName("select")[0];
		leNewSelect.name='sel'+ligne.id;
		fonctionAjax = 'affich_prix('+lineIndex+')';
		leNewSelect.onchange = fonctionAjax;
		leNewInput = document.getElementById(ligne.id).getElementsByTagName("span")[0];
		leNewInput.id='span'+ligne.id;
	}
</script>
 
<script>
	//function affich_prix(argument) {
	function affich_prix() {
		//*
		// Instanciation de l'objet XHR
		var xhr = new XMLHttpRequest();
 
		// PREPARATION DE LA REQUETE : en POST car on envoi des infos d'un formulaire
		xhr.open("POST","ajax_prix.php",true);
 
		// on modifie l'entête d'envoi des données quand il s'agit de données envoyée depuis un formulaire
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		// ENVOI DE LA REQUETE : envoie à ajax_prix.php l'élément pour lequel on veut un prix
		// on spécifie les paramètres à envoyer à la méthode send() quand on est en POST
		pourPrix = document.getElementById('selline0');
		selectedItem = pourPrix.options[pourPrix.selectedIndex].value;
		xhr.send("code="+selectedItem);
 
		// RECUPERATION DES INFOS
		// readystatechange permet de savoir si tout a été envoyé, traité, reçu correctement
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				// propriété responseText pour récupérer les données dans un autre format que le XML
				// la réponse est fournie sous la forme d'une chaine de caractère
				prix = xhr.responseText;
				document.getElementById('spanline0').innerHTML = prix;
			}
		}
		//*/
	}
</script>
 
<form method="post" action="#">
	<p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
	<div id="a_remplir">
		<p id="line0">
			<?php
				try {
				$bdd = new PDO('mysql:host=localhost;dbname=test','root','');
				} catch (Exception $e) {
				die('Erreur : ' . $e->getMessage());
				}
				$requete = $bdd->query('SELECT Code, Nom FROM produit LIMIT 0,5') or die(print_r($bdd->errorInfo()));
				echo '<select id="selline0" name="selline0" onchange="affich_prix();"><option value="NULL">Vide</option>';
				while ($data = $requete->fetch()) {
					echo '<option value="'.$data['Code'].'">'.$data['Nom'].'</option>';
				}
				$requete->closeCursor();
				echo '</select>';
			?>
			<span id="spanline0">Vide</span>
		</p>
	</div>
	<input type="submit" />
</form>
 
	<?php
                if (isset($_POST)) {
                        echo '<pre>';
                                print_r($_POST);
                        echo '</pre>';
                }
        ?>
 
</body>
</html>
La partie 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
<?php
	header('Content-Type: text/html; charset=utf-8'); 
	if(isset($_REQUEST["code"])){
		// connexion
		try {
			$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
		} catch (Exception $e) {
			die('Erreur : ' . $e->getMessage());
		}
		$code = $_REQUEST["code"];
		// requete
		$requete = $bdd->query('SELECT Prix FROM produit WHERE Code = '.$code) or die(print_r($bdd->errorInfo()));
		$data = $requete->fetch();
		echo '<input type="text" value="'.$data['Prix'].'" disabled />';
		$requete->closeCursor();
	}
	else {
		echo '<p>Problème</p>';
	}
?>