[AJAX] Remplir input via liste déroulante en AJAX
Bonjour,
Me voilà bloqué sur mon lieu de stage depuis 2 jours maintenant après avoir parcouru différent tutoriels de votre forum je n'arrive pas à me débloquer.
Je vous explique grosso modo ce que je veux faire puis vous montre mon code.
Alors, je veux une fois l'objet de ma liste déroulante choisi que ça remplisse automatiquement le formulaire en dessous.
Dans mon exemple, je sélectionne un produit et il me remplis en dessous dans mon formulaire, le nom du produit, la masse volumique du produit ainsi que la température du produit.
Alors, voici mes bouts de code :
code createEssaiSimple.php (Contient la partie 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <?php
$req = $bdd->query("select * from produit;");
$ligne = $req->fetch();
echo' Nom du produit <select name="deroulanteProduit" id="deroulanteProduit" onchange="produit()">';
while ($ligne) {
?>
<option value="<?php echo $ligne['nomProduit'] . " - " . $ligne['masseVolumiqueProduit'] . " - " . $ligne['temperatureProduit']; ?>"><?php echo $ligne['nomProduit'] . " - " . $ligne['masseVolumiqueProduit'] . " - " . $ligne['temperatureProduit']; ?></option>
<?php
$ligne = $req->fetch();
}
?>
</select>
<br /><br />
<div class="form-group">
<label for="masse1Essai" class="col-sm-2 control-label">Masse du produit</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="masse1Essai" id="masse1Essai" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="nomProduit" class="col-sm-2 control-label">Nom du produit</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="nomProduit" id="nomProduit">
</div>
</div>
<div class="form-group">
<label for="masseVolumiqueProduit" class="col-sm-2 control-label">Masse volumique du produit</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="masseVolumiqueProduit" id="masseVolumiqueProduit">
</div>
</div>
<div class="form-group">
<label for="temperatureProduit1" class="col-sm-2 control-label">Température produit</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="temperatureProduit1" id="MasseVolumiqueProduit2">
</div>
</div> |
code addEssaiSimple.php (contient le code PHP de la partie POST)
Code:
1
2
3
4
5
6
7
8
9
10
| <?php
include('../../../Compatibilite/includes/header.php');
$req = $bdd->query("SELECT * FROM produit ;");
$nomProduit = $_POST['nomProduit'];
$masseVolumiqueProduit = $_POST['masseVolumiqueProduit'];
$temperatureProduit1 = $_POST['temperatureProduit1'];
?> |
code remplissageProduit.js (code javascript que j'ai repris sur un tuto du forum )
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
| function getXhr(){
var xhr = null;
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;
}
return xhr;
}
function produit(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('deroulanteProduit').innerHTML = leselect;
}
}
// a modifier ici
// Ici on va voir comment faire du post
xhr.open("POST","addEssaiSimple.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, le nom du produit est sélectionnée
sel = document.getElementById('nomProduit');
produit = sel.options[sel.selectedIndex].value;
xhr.send("nomProduit="+produit);
} |
Voilà,
Alors pour le moment rien ne fonctionne.. je suis débutant en javascript et complétement lourdé c'est pour ça que je me permet d'ouvrir un topic sur le forum.
Merci
Cordialement,
Maxime
