Page de chargement après un formulaire

Signaler
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009
-
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009
-
Bonjour,

J'ai actuellement des problème pour mettre en place une animation de chargement a la suite de mon formulaire.

J'explique mieux: j'ai un formulaire qui est divisé en 3 page (par des div) avec des boutons submit faisant appelle a du javascript pour passer d'une a l'autre. A la dernière page il un bouton submit qui valide le formulaire et charge les données récoltés dans la base de donnée.

Là ou mon problème intervient, c'est que je veux faire une page de loading pour faire attendre pendant le chargement des données.

Pour l'instant je suis parti sur créer un événement sur mon submit de fin qui fait apparaitre une balise cachée avec un fond semi-transparent et un gif animé.

J'ai essayé pas mal de chose comme placé un onclick sur mon submit de fin pour faire apparaitre ma div. Seulement avec cette solution ma div se met en place nickel mais dès que l'envoi de données commence, ma div disparait. Je pense que le problème est qu'il lance la première action et qu'une fois faite, il exécute l'autre en squizzant la première.
J'ai aussi essayé un onsubmit sur mon formulaire mais il exécute juste mon script sur une nouvelle page sans exécuter mon submit.
J'ai enfin essayer une balise [javascript:fonction() sur mon bouton submit. (bricolage oui je sais! ^^) Ça a eu comme résultat de me charger mon script nickel mais pas d'éxécuter le submit.

Je sais pas si mon explication est bien clair donc je joins du code, j'ai fais au mieux... ^^

Merci d'avance!

Partie du code Javascript
<script language= "JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function Suite(lien){

var objet = document.getElementById('load'); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !

if(objet.style.display == "none" || !objet.style.display){

objet.innerHTML = "

<center></center>
";
objet.style.display = "block";
objet.style.overflow = "hidden"; 
lien.innerHTML = "";
       
        var hFinal      =     600;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     0;	 	//Hauteur initiale (la hauteur dès le début !)
       
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !

                objet.style.height     =	 hActuel      +     'px';

                if( hActuel > hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();

        
timer = setInterval(fct,40);    //Toute les 40 ms

}else if(objet.style.display == "block"){

var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     680;	 	//Hauteur initiale (la hauteur dès le début !)
       
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !

                objet.style.height     =	 hActuel      +     'px';

                if( hActuel < hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
objet.style.display     =   "none";
                }
        };
        fct();

        
timer = setInterval(fct,40);    //Toute les 40 ms


lien.innerHTML = "+";

}
}
</script>


parti du Body: j'utilise smarthy sur mon site.
<form name="myform" ENCTYPE="multipart/form-data" action="index.php" method="post">


<label id="#" name="#">



<label class="tlabel" for="make">Make*</label>
{ if $mmake eq ''}
<select name="make">
<OPTION Value="">Select Make</OPTION>
<option value="Other">Other </option>
<option value="Alfa Romeo">Alfa Romeo </option>
<option value="Audi ">Audi </option>
<option value="Bentley ">Bentley </option>
<option value="BMW ">BMW </option>
</select>
{else}
<textarea name='make' Value='$mmake' readonly>
{/if}





<CENTER>]</CENTER>








<label id="#" name="#">




 Add Photographs: 







<label class ="tlabel" for= "image1">Image 1</label> 
<label class="tlabel" for="image2">Image 2</label> 
<label class="tlabel" for="image3">Image 3</label> 





 Additional Selling Points: 


<textarea name ="additional" cols="65" rows="3" class="my_textarea"></textarea>







<CENTER>[# ]</CENTER>







<label id="#" name="#">







Choose Payment Option:
{if $USER_LEVEL < 3}
  Credit Card


  PayPal


  Phone Payment with DaoPay
   (SMS or Phone Call)


{else}
No payment required
{/if}









<CENTER>[# ]</CENTER>











</form>

10 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
Bonjour,
dans votre qui contient le submit
il y a aussi un button ???
je ne sais pas comment on peut s'y retrouver

la "manière normale"

function trait()
{ contrôler la saisie
  si erreur : return false;
  sinon, faire apparaître le .gif 
  return true;
}
<form onsubmit=return(trait());".....>
....

</form>



Cordialement
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009

La balise n'est là que pour remonter au début de la page après soumission.

Oui je suis d'accord c'est le fouilli c'est pas clair, et je m'en excuse!

Pour ce qui est du script java pas de problème il marche. Il sert a afficher une div progressivement. j'ai tester avec le return mais dans ma fonction je n'ai rien a retourner.

La solution pour l'instant qui était la plus proche de ce que je recherche c'est celle ci:




Seulement comme j'avais expliqué le script java juste terminé il disparait au profit de l'envoie de données... ce qui est bête pour une page de chargement de disparaitre avant le chargement!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
_ pas de onclick sur un submit
_ pas de formulaire.submit en javascript
_ pas de avec et autre
pour votre cas en plus.

déjà, respectez la manière normale de faire !!!
( comme dans mon exemple )
on pourra causer après si nécessaire.
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009

_ pas de onclick sur un submit ---> y en a pas c'est une solution que j'avais testé.
_ pas de formulaire.submit en javascript ---> Je ne comprends pas.
_ pas de avec et autre --->le est juste une ancre qui appelle une étiquette. mais je l'ai enlevé pour pas faire de problème.


Pour ce qui est de l'exemple que tu m'a donné, je vois pas pourquoi je retournerai une valeur... Le script Suite() permet juste d'afficher la div cachée donc logiquement aucune valeur a retourner.
C'est pas de la mauvaise volonté, juste je comprend pas ce que j'en ferais.

Concernant le contrôle de saisie j'utilise déjà un test plus complet.

Merci pour tes réponses!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>y en a pas
euh... pas sur ce qu'on voit !

>>Je ne comprends pas.
parfois, au lieu d'utiliser le bouton submit
certains utilise l'instruction formulaire.submit()
en javascript ( ce qui fait un comportement
un peu différent )

>>>le est juste une ancre qui appelle une étiquette
ah non, c'est un lien
ça a une action ( recharger la page par exemple )

>>mais je l'ai enlevé
pas sur ce qu'on voit

>>Concernant le contrôle de saisie
>>j'utilise déjà un test plus complet.
vous ne faites pas le contrôle lors
de la soumission du formulaire ?
onsubmit est normalement fait pour cela
si la fonction appelée
retourne false, le formulaire n'est pas envoyé
sinon il l'est quand elle retourne true
d'ou le <form ... onsubmit="return(fonction);" ...

pouvez vous nous mettre l'extrait
de où vous en êtes actuellement ?

fonction script qui affiche le .gif
<form
<submit

et mon foie, rien d'autre n'est nécessaire
pour tester ( vous comme moi ) et voir si
tout est correct... 5/6 lignes quoi.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
pas décidé ???
alors ch'tiot exemple !!!! ( faut l'faire !!! )

t1.htm :
<script type="text/javascript">
function trt(frm)
{	if ( frm.nv.value.length==0 )
{	alert("à remplir");
return false;
}
else	{	frm.im.style.display="inline";
return true;
}
}
</script>
<form action="t1.php" method="post"
onsubmit="trt(this);">



</form>


t1.php (avec sleep pour voir ) :
<?php
sleep(5);
echo date('h:i:s') . "\n";
?>


et tout baigne !
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
bien sur il fallait lire :

<form action="t1.php" method="post"
onsubmit="return (trt(this));">
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009

Merci beaucoup!

J'essaye et je te dis ça!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
j'eusse préféré que ce soit vous qui
nous mettiez ce que vous aviez fait!
on aurait corrigé.
là, en postant un exemple, pas sûr que ce soit
la meilleure façon de vous rendre service et
que vous appreniez/reteniez.
Messages postés
15
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
22 septembre 2009

Bon ben je confirme ça marche merci!

Il a fallu que j'adapte car le smarty n'aime pas les javascript, mais j'ai réussi a m'en sortir et c'est bon.

J'ai juste encore un problème pour afficher une div plutot qu'une image, et vrifier un champs input type file plutot qu'un type texte mais je devrais trouver.

Vu comment j'ai galérer, ne t'inquiète pas j'ai retenu la leçon!

Merci encore!