Formulaire html Fetch API -> resultat sans afficher le formulaire

**twixi** · 24/05/2021, 14h10

Bonjour à tous,

j'espère que vous allez tous bien.

Je me retrouve devant une problématique somme toute assez simple pour vous, j'imagine, mais voila plusieurs jours que je suis bloqué.

J'ai un formulaire HTML qui me permet d'appeler une API avec la méthode FETCH de javascript.
Je récupère et affiche bien les résultats.

Sauf que j'aimerai ne plus afficher mon formulaire pour l'affichage des résultats.

Exemple :
Index.html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Test recupe info API</title>
  <script src="script.js" defer></script>
</head>
<body>
 
<h1>TEST</h1>
<input type="text" id="champ">
<button id="btn">GET VALEUR</button>
<div id="output"></div>
</body>
</html>

Mon script.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
btn.onclick=() => {
	fetch("https://api.github.com/users/"+champ.value)
	.then(reponse => reponse.json())
	.then(data => {
		output.textContent = "";
		output.textContent = `compte de ${data.name}`;
 
	}
	)
 
}

Le problème est que le formulaire reste afficher.
j'aimerai, en effet, que mon formulaire n'apparaisse plus et que mon <div id="output"></div> soit afficher à la place.

Est ce possible ?

Merci merci merci de votre aide

je sèche grave.

**Séb.** · 24/05/2021, 20h32

Ce serait plus simple d'avoir un élément englobant ton <input> et ton <button> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="input">
  <input type="text" id="champ">
  <button id="btn">GET VALEUR</button>
</div>
<div id="output"></div>

Tu peux ainsi tout cacher d'un coup. Dans ton JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
btn.onclick = () => {
    fetch("https://api.github.com/users/"+champ.value)
        .then(reponse => reponse.json())
        .then(data => {
            document.getElementById("input").style.display = "none"; // Cache div#input
            output.textContent = `compte de ${data.name}`;
         });
 };

**twixi** · 25/05/2021, 16h32

Super Seb !! Merci beaucoup ta méthode marche à merveille.

Cependant, je vois que lorsque j'ajoute un formulaire avec la balise formcela ne fonctionne pas. Aurais-tu une idée pourquoi ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<h1>TEST</h1>
<div id="input">
  <form>
  <input type="text" id="champ">
  <button id="btn">GET VALEUR</button>
  </form>
</div>
<div id="output"></div>

**Séb.** · 25/05/2021, 17h35

Avec ton <form> + ton <button> JS il risque d'arriver un truc, genre double-soumission.

Plusieurs possibilités.

1. Pour rester sur ce que tu as commencé, et pour éviter que le <button> ne fasse un submit du form, tu peux faire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="btn" type="button">GET VALEUR</button>

(par défaut tu as un type="submit")

2. Mais le plus propre serait plutôt de faire de faire un onsubmit sur le form. Comme ça tu prends aussi en charge la pression sur ENTER pour déclencher la soumission.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tonForm.onsubmit = (event) => {
    event.preventDefault(); // Pour éviter la soumission
    // ... 
    // Ce que tu avais sur le onclick du button
};

À toi de jouer

**twixi** · 25/05/2021, 18h33

T'es le meilleur !!! je t'embrasserai presque !

Tout fonctionne à merveille !

Formulaire html Fetch API -> resultat sans afficher le formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager