Modifier l'affichage d'une <DIV>

Version imprimable

Bonjour.

J'ai une page HTML dans laquelle j'ai un formulaire. A la soumission du formulaire, je souhaite afficher un écran de chargement.
L'écran de chargement est une <DIV> qui n'est pas affichée (display : none; ). Je souhaite juste changer la valeur display de cette dernière par le JS.

J'ai créé le code ci-dessous, mais cela ne fonctionne pas. :aie:
Le display de ma <DIV> n'est pas modifié par le JS. Ou le JS n'est pas appelé à la soumission du formulaire. Comme je suis assez novice dans le domaine du web je ne vois pas d'où vient le soucis. :oops:

Pourriez-vous m'aider?

le fichier HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Vérification de fichiers CSV</title> <script src="JS/Functions.js"></script> //Déclaration du JS ici <link href="CSS/css.css" rel="stylesheet" /> </head> <body> <div class="fileForm"> <form name="chooseFile" method="post" action="index.php" enctype="multipart/form-data" onsubmit="toggleLoadScreenON();"> //J'appel le JS ici <label>Fichier CSV à vérifier : </label><input type="file" name="csvfile" id="csvfile" required/><br /> <input type="submit" name="submit" value="Envoyer"/> </form> </div> <div class="fileContent csvContent"> ... </div> <div class="fileContent logResult"><?php ... ?></div> <div class="loadScreen"></div> // C'est cet élément que je souhaite afficher </body> </html>
Le fichier JS :
Code:

1 2 3 4 5 6 // Permet d'afficher l'écran de chargement function toggleLoadScreenON (){ var loadScreen = document.getElementById("loadScreen"); loadScreen.style.display = "block"; }
Je précise que les commentaires en HTML sont uniquement dans ce poste à titre indicatif. ;)

Merci d'avance pour votre aide!! :hola:

04/02/2015, 16h15
SpaceFrog

Ton souci majeur est que qui dit soumission de formulaire.. dit rechargement de page
04/02/2015, 16h25
tribaleur

En fait, quand je valide le formulaire, ça recharge la page mais avec un traitement php assez long. (je traite des fichiers CSV)
Du coup l'idée c'est de faire apparaitre un load-screen avec un gif animé pour bien montré à l'utilisateur que le navigateur est en cour de travail.

Ce qui fait que quand le formulaire est soumit :
-le loadscreen s'affiche.
-La page se recharge
-Traitement php du fichier csv en plusieurs seconde (5-10)
-Le traitement php est fini, le navigateur actualise l'affichage de la page. (donc le loadscreen disparait)

En tout cas c'est ce que j'ai compris comme fonctionnement :mrgreen:
04/02/2015, 16h46
SpaceFrog

Oui ta chronologie est correct, mais malgré que le traitement php soit long, il se peut que ton serveur commence a envoyer du html au navigateur assez rapidement du coup la page précédente n'existe plus...
Du coup il serait peut être plus judicieux de mettre ton div visible au chargement de ta page et de le faire disparaitre sur le onload de ta page
04/02/2015, 17h34
tribaleur
Du coup, pour être sure j'ai laissé l'ancien traitement tout en implémentant ta solution.
... mais ça ne fonctionne toujours pas. :aie:

Pour résumé ce que j'ai fait :
-J'ai mis comme valeur normal display = block; dans mon CSS.
-A la fin du chargement de la page je modifie le display en "none" par le JS.
-Quand le formulaire est soumit, je modifie de nouveau le display en "block"

Dans le fichier HTML j'ai rajouté :

Code:

<body onload="toggleLoadScreenOFF();">

Dans mon fichier JS j'ai rajouté la fonction JS :
Code:

1 2 3 4 5 6 //Permet de cacher le loadscreen function toggleLoadScreenOFF (){ var loadScreen = document.getElementsByClassName("loadScreen"); loadScreen.style.display = "none"; }
Les fonctions sont quand à elles bien appelées car, si je remplace leur contenu par "alert('coincoin')" ... le popup s'ouvre bien.
Le problème viens donc dans mon code JS ... mais je ne vois pas où est le soucis :s

***EDIT*** : je viens de me rendre compte que j'essaye de récupérer une class avec "getElementById". Du coup je les ai remplacé par des "getElementsByClassName" ... mais ça ne fonctionne quand même pas.:?
05/02/2015, 08h53
SpaceFrog
Code:

1 2 3 var loadScreen = document.getElementsByClassName("loadScreen"); loadScreen.style.display = "none";
getElementsByClassName

le "s" indique que la methode retourne une collection ...
tu ne peux pas applique un style directement à une collection en js (ce n'est pas distributif)

GENIAL!!! :king:

Je n'avais pas du tout fait attention à ce détail qui change tout!!
Du coup pour que ça fonctionne, il faut utiliser le résultat de la fonction "getElementsByClassName" comme un tableau. Ce qui est normal car la fonction retourne une collection!

J'ai cependant légèrement amélioré ma fonction JS pour n'en avoir qu'une au lieu de deux.
Si on reprend le code en intégralité, ça donne donc :

Le HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Vérification de fichiers CSV</title> <script src="JS/Functions.js"></script> //Déclaration du JS ici <link href="CSS/css.css" rel="stylesheet" /> </head> <body onload="toggleLoadScreenDisplay('none');"> //Je cache le LoadScreen à la fin du chargement de la page <div class="fileForm"> <form name="chooseFile" method="post" action="index.php" enctype="multipart/form-data" onsubmit="toggleLoadScreenDisplay('block');"> //J'affiche la loadscreen en attendant le rechargement de la page <label>Fichier CSV à vérifier : </label><input type="file" name="csvfile" id="csvfile" required/><br /> <input type="submit" name="submit" value="Envoyer"/> </form> </div> <div class="fileContent csvContent"> ... </div> <div class="fileContent logResult"><?php ... ?></div> <div class="loadScreen"></div> // C'est cet élément que je souhaite afficher </body> </html>
Le Javascript :
Code:

1 2 3 4 5 6 //Permet de modifier le display du premier élément HTML avec la class "loadScreen" function toggleLoadScreenDisplay (display){ var loadScreen = document.getElementsByClassName("loadScreen"); loadScreen[0].style.display = display; }
Le CSS :
Code:

1 2 3 4 .loadScreen{ display:block; ... }
Sinon pour information : Le loadScreen s'affiche bien au submit du formulaire. Et non pas au chargement de la page. Je le laisse cependant aux deux endroits, par sécurité.

En tout cas merci de votre aide!!! :mrgreen: