11486 sujets

JavaScript, DOM et API Web HTML5

Actualiser donnée database via liste deroulante ajax

Bonjour, Je cherche depuis quelques jours un moyens de faire un formulaire afin de modifier des tables dans ma base de donnée.

Je m'explique. J'ai un menu déroulant qui affiche la liste de tous les membres de mon site (a partir de la BDD).
Sous ce menu, un champs inputs. J'aimerais que lorsque l'on sélectionne Clank dans la liste déroulante, l'id de Clank se trouvant dans la BDD s'inscrivent automatiquement dans les "value" des inputs.
Tout ça, sans rechargement de la page.

je sais que cela est possible avec AJAX mais je n'arrive pas a retourner les valeur de ma base dans l'inputs.

J'espère que quelqu'un pourra m'éclairer un peu sur la démarche..
Modifié par Clank (11 Apr 2019 - 16:21)
suite a mon premier message j'ai changer mon code et utiliser console.log
je recois bien les informations de ma base mais elle ne s'affiche pas dans mon select je ne comprend pas pourquoi donc voici mon

index.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


<!-- jQuery (Media Temple) : -->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<!-- Google : -->
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Microsoft : -->
<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script>

var url="liste.php"+$(this).val();

$.ajax({
url:url
}).done(function(data) {
if(data!=null)
{

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
var choice = document.getElementById("choice" );
while (choice.firstChild) {
choice.removeChild(choice.firstChild);
}
$("#id" ).val(myObj[0].id);
for (var i = 0; i < myObj.length; i++) {
var option = document.createElement('option');
option.text = myObj.Nom;
option.value = myObj[i].idTechnicien;
choice.add(option);
}
$('#choice').change(function () {
$('#id').val($(this).find(':selected').data('id'));
document.getElementById("id" ).value = this.value;
});

}
};
}
});

xmlhttp.open("GET", "liste.php", true);
xmlhttp.send();

</script>
</head>
<body>

<form>
<select id="choice" name="choice">
<option></option>
</select>
</form>
<br>
<div id="container"><b></b></div>

<input type ="tel" id="id" name="id" type="text" class="ajax" >

</body>
</html>

et mon

liste.php


<!DOCTYPE html>
<html>
<head>


</head>
<body>

<?php
function console_log( $data ){
echo '<script>';
echo 'console.log('. json_encode( $data ) .')';
echo '</script>';
}

$connect=mysql_connect('localhost','root','');
mysql_select_db('projet');

$result = mysql_query("SELECT idTechnicien, Nom FROM technicien " );

if (!$result) {
die('Requête invalide : ' . mysql_error());
}

$info = array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$table = array(); // création d'un tableau
$table['Nom'] = $row['Nom'];
$table['idTechnicien'] = $row['idTechnicien'];
$info[] = $table;
}
console_log( $info );

$myJSON = json_encode($info);
echo $myJSON;

mysql_free_result($result);

?>


</body>
</html>



[/i]
Bonjour,

j'ai pas lu tout ton code, ce serait mieux d'utiliser les balises prévues à cet effet d'ailleurs, mais pourquoi tu as mis 4 fois jquery au début de ton code ? Il faut le mettre une seule fois.

Aussi ton fichier liste.php n'a pas trop de sens. Avec ton script ajax, dans index.php, tu vas récupérer des données générées via php. Soit du json, du xml ou du code html mais pas une page entière donc tu ne doit pas avoir de doctype, balise body, etc, scripts dans ce code.

Je pense que le code que tu essayes de faire est, à la base, juste pas très logique car tu peux dès que tu génères ta liste de techniciens les associer à leur id. D'ailleurs c'est ce que tu semble déjà faire :


<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un Technicien:</option>
<option value="328">Personne1</option>

</select>
</form>


Ensuite avec javascript, tu peux récupérer cette valeur lorsque tu sélectionne l'utilisateur, pas besoin d'utiliser ajax pour cela. Un exemple parmi d'autres : https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange

Et en faire ce que bon te semble.
Sujet clos
Aller à