Formulaire html Fetch API -> resultat sans afficher le formulaire

Version imprimable

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:

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:

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.

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

Code:

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:

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}`;
         });
 };

25/05/2021, 16h32
twixi
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:

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>
25/05/2021, 17h35
Séb.
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:

<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:

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 ;)
25/05/2021, 18h33
twixi

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

Tout fonctionne à merveille !