Phrase pour faire patienter l'utilisateur durant l'envoi d'un formulaire

[heretik25]

Bonjour,

Je cherche à afficher un message à l'utilisateur lorsqu'il soumet un formulaire. J'utilise le code ci-dessous qui fonctionne bien. Cependant, mon formulaire envoi la requête de traitement sur une autre page et de ce fait, le message s'affiche rapidement puis disparaît au profit d'une page blanche.

Comment pourrais-je faire en sorte d'afficher cette phrase durant la transaction tout en gardant mon traitement sur une page externe ?

Par avance merci.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function patienter(div,div2)
{
    document.getElementById(div).style.display = 'block';
    document.getElementById(div2).style.display = 'none';
}
</script>
 
<form id="formulaire" method="post" action="page_externe.php" >
<p><input type="submit" name="envoyer" id="button" value="Envoyer" onclick="javascript:patienter('waiting', 'formulaire');" />
<input type="reset" value="Effacer" />
</p><br />
</form>
<div id="waiting" style="display:none;">Merci de patienter durant l'upload de vos fichiers. Cette opération peut durer plusieurs minutes.<br /></div>

[rotrevrep]

Bonsoir

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function patienter(div)
{
alert("Merci de patienter durant l'upload de vos fichiers. Cette opération peut durer plusieurs minutes.");
    document.getElementById(div).submit();
}
</script>
 
<form id="formulaire" method="post" action="page_externe.php" >
<p><input type="button" name="envoyer" id="button" value="Envoyer" onclick="patienter('formulaire');" />
<input type="reset" value="Effacer" />
</p><br />
</form>

ceci affichera un message à l'utilisateur, et l'envoi du formulaire ne se fera que si il valide le message

[heretik25]

Bonsoir et merci pour la réponse,

Si je fais un alert, j'ai effectivement un message un peu intrusif mais une fois cliqué, j'aurais toujours cette page désespérément blanche en attendant la fin du traitement... Aucune solution pour afficher la phrase du côté de la page de traitement ?

Merci !

[heretik25]

Personne n'a été confronté à un tel souci ?

Merci.

[Auteur]

bonsoir,

peut-être peux-tu essayer cette astuce en remplaçant le gif par ton texte.

Dans l'astuce en question il s'agit de réattribuer à la balise img l'image associée en faisant un img.src = img.srcDans ton cas il faudrait donner le texte :

Code html :

1
2
3
4
5
6
7
8
9
 
<form id="formulaire" method="post" action="page_externe.php" onsubmit="return envoiFormulaire(this)">
<p>
<input type="button" name="envoyer" id="button" value="Envoyer"  />
<input type="reset" value="Effacer" />
</p>
<br />
</form>
<div id="texte" style="display:none">&nbsp;</div>

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function envoiFormulaire(form)
{
  form.submit();
  form.style.display="none";
  var obj=document.getElementById("texte");
  if(obj)
  {
    obj.innerHTML = "Merci de patienter";
    obj.style.display="block";
  }
  return false;
}

[Darkyl]

Salut,

ou alors tu fais ton traitement du formulaire par appel ajax et tant que l'appel n'est pas fini, tu change mondiv.html avec ton texte...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
function refresh_div(nomdiv,lien)
 
{
 var nouvelobjet=$('#'+nomdiv);
 
var xmlhttp = null;
 
if(window.XMLHttpRequest)
 
{ // Firefox
 
xmlhttp = new XMLHttpRequest();
 
}
 
else if(window.ActiveXObject)
 
{ // Internet Explorer
 
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 
}
 
 
var method = 'POST';
 
var filename = lien;
 
xmlhttp.open(method, filename, true);
 
 
xmlhttp.onreadystatechange = function() 
 
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
	{
		$('#'+nomdiv).html("");
		document.getElementById(nomdiv).innerHTML = xmlhttp.responseText ;
		//var AllScripts=$('#'+nomdiv+' >script');
		var AllScripts=document.getElementById(nomdiv).getElementsByTagName("script");
 
		for (var i=0; i<AllScripts.length; i++) 
		{
			var s=AllScripts[i];
			if (s.src && s.src!="") 
			{
 
			}
			else 
			{
				window.eval(s.innerHTML);
			}
		} 
	}
	else
	{
	$('#'+nomdiv).html("<font style='font-family:Verdana, Helvetica, Helv;font-size:9px;color:white;'>exécution de la requête");
 
	}
}
 
xmlhttp.send(null);
}

Enfin, c'est comme ça que je fais moi....
Mais il me semble que cela ne marche pas sur tout navigateur : firefox, chrome ok, IE je sais pas