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