Affichage d'une requête et mis a jour au click du formulaire

Bonjour,
je ne suis pas de tout expert en Ajax, j'ai une base de donnée avec une table catégorie. Pour administrer j'ai crée un formulaire(dans une page administrateur.php) pour créer une nouvelle catégorie. Je voudrais à coté du formulaire dans un div faire apparaitre toutes mes catégories et chaque fois que je soumet le formulaire pour en créer une, la liste dans le div se mets à jour avec une requête AJAX.
Mes problèmes avec mon code :
Quand je soumet le formulaire je vois juste un court instant ma liste vu que ma page se recharge, j'ai besoin de soumettre le formulaire pour créer une nouvelle catégorie.
Est ce que il y a possibilité avec une requete AJAX d'avoir la liste deja afficher avant de soumettre le formulaire puis quand à la soumission du formulaire la liste s'affiche à jour ?
voici mon code :
ma page de formulaire dans createCategories.php :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class= "col-md-5 border border-grey p-3 m-3 "> <form action="administration.php" enctype="multipart/form-data" method="post"> <h5>Créer une catégorie</h5> <div class="form-group mb-1"> <label for="nom">nom *</label> <input type="nom" class="form-control" name="nom" required> </div> <div class="form-group mb-3"> <label for="affiche">photo *</label> <input type="file" class="form-control-file d-block bg-white p-3" name="file" value="" required> </div> <input type="submit" name="submitCreateCategorie" class="mb-3" value="envoyer" onclick="loadDoc()"> </form> </div>

---

dans ma page administration.php j'appelle la page du formulaire :

Code:

---

<?php require 'formCreateCategories.php '?>

---

mon code AJAX :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/JavaScript"> //-------récupérer l’objet XMLHttpRequest---------------- function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("categories").innerHTML = this.responseText; } }; xhttp.open("GET", "categories.ajax.php", true); xhttp.send(); } </script>

---

puis la requete sur une page categories.ajax.php :

Code:

---

1 2 3 4 5 6 7 8 9 10

<?php require_once '../controller/controllerCategories.php'?> <?php   $categoriesController = new ControllerCategories(); $categories = $categoriesController->getCategories(); ?> <ul> <?php foreach($categories as $cat) :?> <li><?=$cat["nom"]?></li> <?php endforeach ?> </ul>

---

Mon code marche c'est juste la mise en place qui me pose problème.
Merci

Bonjour,
Après recherche j'ai résolu mon problème :

Code:

---

1 2 3 4

let file = "../ajax/categories.ajax.php"; fetch (file) .then(x => x.text()) .then(y => document.getElementById("categories").innerHTML = y);

---

Bonne journée

Bonjour,

Citation:

---

Quand je soumet le formulaire je vois juste un court instant ma liste vu que ma page se recharge

---

le comportement est normal si tu n'inhibe pas l'action par défaut via un event.preventDefault.

Code:

---

1 2 3 4

function loadDoc(e) { e.preventDefault(); // ... la suite }

---

mais mieux avec un appel du type :

Code:

---

1 2 3 4 5

const f = document.querySelector("form"); f.onsubmit = (e) => { e.preventDefault(); // ... les actions à faire }

---

Citation:

---

Après recherche j'ai résolu mon problème :

---

L'API fetch remplace avantageusement XMLHttpRequest mais je doute que cela soit ce qui à résolu ton problème.

Bonjour,
J'ai supprimé l'action sur l'input du formulaire et maintenant malgré la page se charge à la soumission du formulaire j'ai quand même en réel la liste qui reste affichée et qui se mets à jour sans devoir actualiser la page deux fois. Par contre je n'ai pas trop compris ou mettre votre code désolé.
Est ce que je dois entourer mon code ? :

Code:

---

1 2 3 4 5 6 7

const f = document.querySelector("form"); f.onsubmit = (e) => { e.preventDefault(); fetch (file) .then(x => x.text()) .then(y => document.getElementById("categories").innerHTML = y); }

---

Cela permettrais de ne pas charger la page et envoyer quand meme les données à ma base ?
merci pour votre patience.:D

Il te faut respecter l'ordre d'apparition des éléments dans la page HTML, pour pouvoir utiliser un élément via JavaScript il faut que celui-ci soit déjà présent dans la page.
Le schéma est donc

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<form action="administration.php" enctype="multipart/form-data" method="post"> <!-- les éléments de ton formulaire --> </form>   <script> // le script applicable à ton formulaire const f = document.querySelector("form"); f.onsubmit = (e) => {   //inhibe action par défaut   e.preventDefault();   // récup. URL de la requête   const reqURL = f.getAttribute("action");   // c'est parti   fetch(reqURL)     .then(x => x.text())     .then(y => document.getElementById("categories").innerHTML = y); } </script>

---

voilà en gros ce que tu devrais avoir !

Bonjour,
merci beaucoup pour votre aide et vos conseils.
bonne journée