Liaison entre fichiers dont formulaire

Fermé

RGTE - 3 oct. 2021 à 15:24
jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 - 3 oct. 2021 à 20:26

Bonjour à tous,

Je suis à la découverte de PHP et HTML.

Je possède un fichier contenant un formulaire :

<form method="post" action="golfeur_get_data.php">
    <p>
        <h1>
        Trouver ces résultats        
    </h1>
    
    Veuillez entrer votre ID : 
        <input type="text" name="ID_GOLFEUR"/>
        <input type="submit" value="Lancer la recherche" />
    </p>
    </form>

Ce formulaire me permet de renseigner un identifiant pour associer les résultats d'un joueur à son identifiant unique.

Je récupère ensuite cette valeur dans mon fichier de data :

<?php
    require("golfeur_config.php");      //Lecture du fichier de conf
    //Préparation de la requête d'accès au résultat par date des joueurs 
    //$id_saisi = $_REQUEST['ID_GOLFEUR'];
    //echo "$id_saisi"
    if (empty($_POST['ID_GOLFEUR'])){
        $golfeur_id = 1;
    else 
        $golfeur_id = $_POST['ID_GOLFEUR'];
    $get_data = $conn->prepare("SELECT P.resultat_net, C.date, P.resultat_brut 
    FROM golfeur G 
    INNER JOIN participation P ON P.id_golfeur = G.id_golfeur 
    INNER JOIN competition C ON C.id_competition = P.id_competition 
    WHERE g.id_golfeur = $golfeur_id ");
    //éxecution de la requête 
    $get_data->execute();
    
    
    
    
    //si le nombre de lignes retournés par la fonction execut et supérieur à 0
    if($get_data->rowCount()>0){
    
    while($value = $get_data->fetch(PDO::FETCH_OBJ)){
        //var_dump ($value);                      //affichage du contenue de la variable 
    $resultat_net = $value->resultat_net;       //on donne la valeuur résultat net à la variable du même nom 
    $date = $value->date;
    $resultat_brut = $value->resultat_brut;
    //On met la totalité de ces valeurs dans le tableau result_array
    $result_array[] = ['resultat_net'=>$resultat_net, 'date'=>$date, 'resultat_brut'=>$resultat_brut]; 
    
    
    }
    echo json_encode($result_array);
    die();
    }
  
    
    ?>

Jusqu'ici tout va bien, la prise en compte de mon changement d'ID fonctionne dans ma requête.

Mon dernier fichier permet quant à lui de récupérer ses données et de tracer un graphique par l'intermédiaire de l'AJAX. Cependant je n'arrive pas à envoyer les données à mon fichier de gestion de données puis à afficher mon graphique correspondant au joueur (Si j'affiche mon graphique en changeant manuellement mon ID cela fonctionne)

Voici le code HTML de mon graphique :

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">            <! -- Accepte les accents -->    
<title>Stats des golfeurs</title>   <! -- Définition du titre de la page -->
<link rel="stylesheet"  
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>

<canvas id="line_canvas"></canvas>

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: this,      //ou aller les datas ? 
method: "GET",                    //execution d'une requête
success: function(data) {         //si l'opération réussi
var data = JSON.parse(data);      //découpage des différentes données dans data 
/*var name = [];
var mark = [];*/
var resultat_net = [];            //création d'un tableau vide resultat_net
var date = [];                    //création d'un tableau date
var resultat_brut = [];           //création d'un tableau vide resultat_brut


for(var i in data) {
    resultat_net.push(data[i].resultat_net);   //on insère le resultat net dans le tableau à la case i, incrémentation par boucle
    resultat_brut.push(data[i].resultat_brut); //idem
    date.push(data[i].date);                   //idem 
}
 
var chartdata = {
    labels: date,     //définition de notre abscisse 
    //contrôle des caractéristiques 
    datasets : [
    {
    label: 'Résultat net du golfeur n°1 : ',
    backgroundColor: 'rgba(255, 50, 0, 0.75)',    //couleur de fond
    borderColor: 'rgba(0, 0, 0, 0.75)',           //couleur des lignes
    hoverBackgroundColor: 'rgba(0, 0, 0, 1)',     //contour du rond 
    hoverBorderColor: 'rgba(255, 50, 50, 1)',     //couleur du rond
    data: resultat_net                            //définition ordonnée
    },
    {
    label: 'Résultat brut du golfeur n°1:',
    backgroundColor: 'rgba(255, 100, , 0.75)',
    borderColor: 'rgba(0, 0, 0, 0.75)',
    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
    hoverBorderColor: 'rgba(200, 200, 200, 1)',
    data: resultat_brut
    }
    ]
};


var line_canvas = $("#line_canvas");


var lineGraph = new Chart(line_canvas, {
    type: 'line',
    data: chartdata
});


},
error: function(data) {
console.log(data);
}
});
});
</script>
</body>
</html>

J'aimerai donc savoir si quelqu'un aurait une idée sur la façon de faire pour envoyer les données à ma page de data et afficher mon graphique avec le changement d'ID à jour.

En vous remerciant par avance.

Configuration: Windows / Chrome 94.0.4606.61

A voir également:

Liaison entre fichiers dont formulaire
Formulaire de réclamation facebook - Guide
Wetransfer gratuit fichiers lourd - Guide
Renommer plusieurs fichiers en même temps - Guide
Explorateur de fichiers - Guide
Fichiers epub - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38424 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 février 2025 4 734
Modifié le 3 oct. 2021 à 20:26

Bonjour,

Déjà, à l'avenir, merci de préciser le LANGAGE dans les balises de code ( afin d'avoir la coloration syntaxique et la numérotation des lignes )
Explications à lire entièrement disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, si tu fais de l'ajax... il ,ne faut pas de submit

<form>
    <p>
        <h1>
        Trouver ces résultats        
    </h1>
    
    Veuillez entrer votre ID : 
        <input type="text" id="ID_GOLFEUR"/>
        <input type="button" value="Lancer la recherche" id="go" />
    </p>
    </form>

et cote JS, detecter le click sur le bouton et là .. lancer l'ajax en passant en paramètres l'id .


<script type="text/javascript">
  $(document).ready(function(){
  
  //---->>> listener sur le clik du bouton --->>   
  $("#go").click(function(){
  
    var ID_GOLFEUR = $("#ID_GOLFEUR").val();
    var datas = {ID_GOLFEUR:ID_GOLFEUR};
    $.ajax({
      url: golfeur_get_data.php,      //ou aller les datas ? 
      method: "POST",                    //execution d'une requête
      data: datas,
      success: function(data) {         //si l'opération réussi
        var data = JSON.parse(data);      //découpage des différentes données dans data 
        /*var name = [];
        var mark = [];*/
        var resultat_net = [];            //création d'un tableau vide resultat_net
        var date = [];                    //création d'un tableau date
        var resultat_brut = [];    
        
        
        //la suite de ton code ...
        // ...
        
        
      
      
  //--- FIN du listener sur le clik du bouton --->>    
  });

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Extraire le contenu de plusieurs fichiers