Liste déroulante avec affichage des données de la BDD

Bonjour à tous,

Je me permets de venir vers vous pour un problème que j'essaye de résoudre depuis plusieurs semaines sans y parvenir, malgré la consultation de nombreux forums. Je vais essayer d'être le plus claire possible.

J'ai une base de données avec une table "produits" et des champs : "id", le nom du produits, le prix et le code TVA.

J'ai donc un formulaire avec un<select> dont le 1er <option> est vide et les autres qui récupèrent les noms de produits depuis ma BDD. Ensuite, 3 input de type text et un submit. Si le 1er <select> est vide, les champs que je renseigne alimentent la BDD. Jusque là, tout fonctionne. Ce que je voudrais, c'est que quand je sélectionne un nom de produit dans ma liste, les champs input test affichent respectivement le nom, le prix et le code TVA qui correspondent à ma selection (c'est cela que je n'arrive pas à faire) afin éventuellement de pouvoir les modifier (si le prix change par exemple). J'ai bien compris qu'il fallait que j'utilise AJAX mais je ne vois pas comment l'utiliser (malgré le visionnage de nombreux tutos). J'ai même essayé de déterrer un vieux sujet de 2013 en tentant de l'adapter mais rien n'y fait.

Cela m'ennuie beaucoup car c'est une situation que je rencontre dans divers endroit de mon projet et le dernier rempart pour son accomplissement.

Voici où j'en suis arrivé (ceci est un test, c'est la raison pour laquelle l'aspect sécurité n'est pas géré).

Mon formulaire :

<form action="test_traitement.php" method="post">
            <label for="select">Sélectionner un nom à modifier ou ajouter un nouveau nom : </label><br>
            <select name="select" id="select"> 
                <option value=""></option>

                <?php
                    $conn = new PDO ('mysql:host=localhost;dbname=test' , 'root' , 'root');

                    
                    $req = $conn->query('SELECT * FROM produits ORDER BY produits');
        // Je crée un tableau associatif avec des valeurs vides
                    $value_input = array(
                        'produits' => "",
                        'prix' => "",
                        'tva' => "");
        // Je parcoure le tableau dont je récupère les valeurs pour les stocker dans mon tableau
                        while ($res = $req->fetch()) {
                           echo "<option class='opt' value=" . $res['id'] . ">" . $res['produits'] . "</option>";
                           if ( $_POST['select'] == $res['id'] ) {
                              $value_input['produits'] = $res['produits'];
                              $value_input['prix'] = $res['prix'];
                              $value_input['tva'] = $res['tva'];

                           }
                        }
                ?>  

            </select><br>

         <!-- Je cherche à afficher les valeurs de mon tableau associatif dans les value de mes input -->
            <label for="nom">Produit : </label><input class="produit ajax" type="text" name="produit" value=""/><br>
            <label for="prenom">Prix : </label><input class="prix ajax" type="text" name="prix" value=""/><br>
            <label for="nom">Code TVA : </label><input class="tva ajax" type="text" name="tva" value=""/><br>
            <input type="submit" name="add" value="Enregistrer">
        </form>

Page de traitement :

<?php
if{

/* Ici le traitement pour ajouter les produits dans la BDD si le champs <select> est vide et qui 
fonctionne très bien */
   
}
/* Code quand je sélectionne un produit et que je veux que les info s'affichent dans les input
(et qui ne fonctionne pas) */
 else{

    $produit = $_POST['produit'];
    $result = "";

    $req = $db->query('SELECT * FROM produits WHERE produits');
        $n_data = $db_select->rowCount();
        $row_all = $db_select->fetchAll();
        foreach ($row_all as $row){
            $result[] = $row;

            $result = $result[0];
            echo json_encode($result);
        };
 };

Et enfin la fichier Ajax :

$(function(){
    $('select#select').change(function() {
		//On récupère le nom
		var value = $(this).val();
                //Index
                var i = 0;
		//On prépare l'Ajax
		$.ajax({
                //On indique le fichier ou aller consulter 
		url: "test_traitement.php",
                //Le type de l'envoi (POST ou GET)
		type: "POST",
                //On indique que le résultat sera un tableau JSON      
		dataType: "JSON",
		//On lui donne le nom de la personne
                data: {nom : value},
			success:function(data)
			{
							//Nécessite d'avoir les informations du tableau dans le 
							//même ordre que les inputs
							$('input.ajax').each(function(){
					                        $(this).val(data[i])
								i++;
							});
			}
		});
	});

});

Je vous fais grace du fichier de connexion à la BDD

J'espère que j'ai été assez clair et je vous remercie par avance de l'aide que vous pourrez m'apporter.
Bien cordialement !
Babaorom.