I am coding a project and I am using a modal form for registrations so I now want to display and modify the data in the modal, When I click on the edit button I get the data from the form in the console but I do not cannot display them in modal form.
in the ‘domainedeformation_candidats’ table I record the information with the user ID ($_SESSION[‘user_id’])
Code index.php :
<?php
session_start();
require_once('../session.php');
require_once('../connexion.php');
// header('Content-Type: application/json');
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
?>
<body>
<!-- Header End -->
<?php
// Supposons que $conn est votre objet PDO pour la connexion à la base de données
$stmt = $conn->prepare("SELECT * FROM DomaineDeFormation_candidats WHERE ID_Candidat = :id_candidat");
$stmt->bindParam(':id_candidat', $_SESSION['user_id']); // Assurez-vous que l'ID du candidat est disponible
$stmt->execute();
$formations = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!-- Diplômes et Formations -->
<div class="col-md-12 wow mt-2">
<div class="bg-light rounded p-4">
<div class="text">
<div class="row">
<?php foreach ($formations as $formation): ?>
<div class="col-md-12 mb-3">
<div class="row">
<div class="col-md-3 espace_bordure">
<?= htmlspecialchars($formation['Mois_AnneeDebut']) ?> - <?= htmlspecialchars($formation['Mois_AnneeFin']) ?>
</div>
<div class="col-md-8 espace_bordure">
<?= htmlspecialchars($formation['Diplome']) ?> - <?= htmlspecialchars($formation['DomaineDeFormation']) ?> - <?= htmlspecialchars($formation['Ecole']) ?>
</div>
<div class="col-md-1">
<a href="#" data-id="<?= htmlspecialchars($formation['ID']) ?>" data-bs-toggle="modal" data-bs-target="#editeformation" onclick="fetchFormationData(this)" style="text-decoration: none;">
<i class="bi bi-pen-fill"></i>
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<!-- Modale HTML (structure inchangée) -->
<div class="modal fade" id="editeformation" tabindex="-1" aria-labelledby="editeformationLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editeformationLabel">Modifier la Formation</h5>
<button type="button" class="btn-close" id="formationModal" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="submit_formation.php" method="post">
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
<div class="modal-body">
<div id="formation-container" class="">
<div class="formation-item mb-3">
<div class="row">
<div class="mb-3 col-md-12">
<label for="ecole_1" class="form-label">Établissement</label>
<input type="text" name="ecole[]" id="ecole_1" class="form-control" required>
</div>
<div class="mb-3 col-md-6">
<label for="diplome_1" class="form-label">Diplôme</label>
<input type="text" name="diplome[]" id="diplome_1" class="form-control" required>
</div>
<div class="mb-3 col-md-6">
<label for="domaineDeFormation_1" class="form-label">Domaine de formation</label>
<input type="text" name="domaineDeFormation[]" id="domaineDeFormation_1" class="form-control" required>
</div>
<script>
const htmlContent = `
<div class="mb-3 col-md-6">
<label for="domaineDeFormation_1" class="form-label">Domaine de formation</label>
<input type="text" name="domaineDeFormation[]" id="domaineDeFormation_1" class="form-control" required>
</div>
`;
</script>
<div class="mb-3 col-md-6">
<label for="moisanneedebut_1" class="form-label">Mois et Année de début</label>
<input type="month" name="moisanneedebut[]" id="moisanneedebut_1" class="form-control" required>
</div>
<div class="mb-3 col-md-6">
<label for="moisanneefin_1" class="form-label">Mois et Année de fin</label>
<input type="month" name="moisanneefin[]" id="moisanneefin_1" class="form-control" required>
</div>
<div class="mb-3 col-md-12">
<label for="competences_1" class="form-label">Mes Compétences</label>
<input type="text" name="competences[]" id="competences_1" class="form-control" required>
</div>
<div class="mb-3 col-md-12">
<label for="descriptionPoste_1" class="form-label">Description</label>
<textarea name="descriptionPoste[]" id="descriptionPoste_1" class="form-control" rows="3" required></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" style="border-radius: 18px;">Enregistrer</button>
</div>
</form>
</div>
</div>
</div>
$('#editeformation').on('shown.bs.modal', function () {
var formationId = $('#editeformation').data('formation-id');
fetchFormationData(formationId);
});
function fetchFormationData(formationId) {
console.log('Formation ID: ' + formationId);
fetch('get_formation_data.php?id=' + formationId)
.then(response => response.text())
.then(responseText => {
console.log('Texte de la réponse:', responseText);
try {
var data = JSON.parse(responseText);
console.log('Données reçues:', data);
// Mise à jour des champs du formulaire avec les données reçues
$('#ecole_1').val(data.ecole || '');
$('#diplome_1').val(data.diplome || '');
$('#domaineDeFormation_1').val(data.domaineDeFormation || '');
$('#moisanneedebut_1').val(data.moisanneedebut || '');
$('#moisanneefin_1').val(data.moisanneefin || '');
$('#competences_1').val(data.competences || '');
$('#descriptionPoste_1').val(data.descriptionPoste || '');
console.log('Données reçues - 5 :', data.descriptionPoste);
} catch (error) {
console.error('Erreur lors de la conversion en JSON:', error);
alert('Erreur lors de la récupération des données.');
}
})
.catch(error => {
console.error('Erreur:', error);
alert('Erreur lors de la requête : ' + error.message);
});
}
get_formation_data.php
<?php
require '../connexion.php';
if (!isset($_GET['id']) || empty($_GET['id'])) {
echo json_encode(['error' => 'ID manquant']);
exit();
}
$id = intval($_GET['id']);
error_log("ID recherché : " . $id);
try {
$stmt = $conn->prepare('SELECT * FROM domainedeformation_candidats WHERE ID = :id');
$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->execute();
$data = $stmt->fetch(PDO::FETCH_ASSOC);
if ($data) {
echo json_encode($data);
} else {
echo json_encode(['error' => 'Aucune donnée trouvée']);
}
} catch (PDOException $e) {
echo json_encode(['error' => 'Erreur de base de données: ' . $e->getMessage()]);
}
?>
I tried this script to display the data in the Modal form but nothing is displayed however I retrieve it in the console:
function fetchFormationData(element) {
var formationId = element.getAttribute('data-id');
console.log('Formation ID: ' + formationId);
fetch('get_formation_data.php?id=' + formationId)
.then(response => response.text())
.then(responseText => {
console.log('Texte de la réponse:', responseText);
try {
var data = JSON.parse(responseText);
console.log('Données reçues:', data);
// Test simple : mise à jour des champs avec des valeurs statiques
document.getElementById('ecole_1').value = data.ecole || 'Valeur par défaut';
document.getElementById('diplome_1').value = data.diplome || 'Valeur par défaut';
document.getElementById('domaineDeFormation_1').value = data.domaineDeFormation || 'Valeur par défaut';
document.getElementById('moisanneedebut_1').value = data.moisanneedebut || '2023-01';
document.getElementById('moisanneefin_1').value = data.moisanneefin || '2023-12';
document.getElementById('competences_1').value = data.competences || 'Compétence par défaut';
document.getElementById('descriptionPoste_1').value = data.descriptionPoste || 'Description par défaut';
console.log('Données ECOLE:', document.getElementById('moisanneefin_1').value);
} catch (error) {
console.error('Erreur lors de la conversion en JSON:', error);
}
})
.catch(error => {
console.error('Erreur:', error);
alert('Erreur : ' + error.message);
});
}