11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis débutant en JS et donc en AJAX et j'aurai besoin d'un peu d'aide.
Je cherche à remplir des inputs selon le choix d'une valeur dans une liste déroulante par l'utilisateur sans actualiser la page.

J'ai trouvé sur le forum un exemple plutot bien détaillé mais comme je débute en JS je n'arrive pas à adapter le code.

dans mon fichier nouveau_devis.php
<form method="post" action="" id="reference">
                        <div class="bloc light-blue-white">
                            <h2>Informations sur les pièces</h2>
                            <div class="wrap">

                                <table id="nouveau_devis_piece">                                       
                                    <tr id="piece1">
                                        <td>Référence :</td>
                                        <td>
                                                <?php
                                            $req = $bdd->query('SELECT  reference '
                                                    . 'FROM liste_piece '
                                                    . 'ORDER BY reference ');
                                            ?>
                                            <select name="reference" id="reference">
                                                <?php while ($donnees = $req->fetch()) { ?>                                       
                                                <option value="<?php echo $donnees['reference']; ?>"><?php echo $donnees['reference']; ?></option>
                                                <?php 
                                                }
                                                $req->closeCursor();
                                                ?>
                                            </select>
                                        </td>

                                        <td>Type :</td>
                                        <td><input type="text" name="piece" id="piece" size="25" class="piece"></td>

                                        <td>Prix Unitaire :</td>
                                        <td><input type="text" name="prix_unitaire[]" id="prix_unitaire" size="25"></td>
                                    </tr>

                                    <tr id="piece2">
                                        <td>Nombre de pièces :</td>
                                        <td><input type="number" name="nombre_piece[]" id="nombre_piece" size="25"></td>

                                        <td>Prix total piece:</td>
                                        <td><input type="text" name="prix_total_piece[]" id="prix_total_piece" size="25"></td>

                                        <td>Réduction :</td>
                                        <td><input type="text" name="reduction_piece[]"  id="reduction_piece" size="25"></td>
                                    </tr>
                                </table>
                                
                                <a href="#" onclick="duplic()">Ajouter une pièce</a> <br/>
                                <input type="submit" id="lancer_recherche" value="Valider" name="valide"/>

                            </div>
                        </div>
                        </form>


j'ai ensuite un fichier JS (fonction.js) que j'ai include dans le head avec la librairie:

$(document).ready(function() {
                $('select#reference').change(function() {
		//On récupère le nom
		var value = $(this).val();
                //Index
               
		//On prépare l'Ajax
		$.ajax({
                //On indique le fichier ou aller consulter 
		url: "../vue/traitements.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: {reference : value},
		success:function(data)
		{
                        
                        data = $.parseJSON(data);
                        $('input#piece').val(data.piece);
		                 
				
			
		}
	});

});
});


et enfin le fichier (traitements.php) qui reçoit les infos envoyés par le fichier JS mais pour le moment, il ne reçoit rien....
<?php

include('../connexion_bdd.php');
if(!empty($_POST['reference'])){
$ref = $_POST['reference'];
echo $_POST['reference'];
$sql = 'SELECT * FROM liste_piece WHERE reference="' . $ref . '"';
$select = $bdd->query($sql);
$select->setFetchMode(PDO::FETCH_OBJ);

$enregistrement = $select->fetchAll();
if ($enregistrement) {
    $enregistrement = $enregistrement[0];
    echo json_encode($enregistrement);
} else {
    echo "Aucun résultat";
}
}
else{
    $ref='0';
    echo $ref;
}
?>


merci à tous ceux qui pourront m'aider à me débloquer.
Modifié par cucaracha (27 Nov 2015 - 14:09)