Soumission et retour formulaire

**benthebest** · 23/06/2009, 00h49

Bonjour,

je suis entrain de devenir fou, mais c'est probablement parce que je suis débutant

Voici mon problème (je l'ai déjà exposé sur le forum php/formulaire mais je m'aperçoit qu'il s'agit bien d'un problème javascript...) :

lorsque j'essaie de valider un formulaire d'upload de fichier, je voudrai , si il y a une erreur, que celle-ci s'affiche dans la même page que le formulaire, dessous et en rouge.

Mais en attendant de recevoir ces informations, je souhaite afficher un message qui demande à l'utilisateur de patienter. Voici comment j'ai créer mon fichier du formulaire test.php :

Code :

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

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
 
 
<?php
if($_POST)
{
        require("upload.php");
 
}
?>
 
 
 
<script language="JavaScript">
<!--
window.onload = function()
{
	document.getElementById("id_div_message_wait").style.display = "none";
	document.getElementById("id_button_submit").disabled = "";
 
	document.getElementById("id_button_submit").onclick = 
		function ()
		{
			document.getElementById("id_div_message_wait").style.display = "";
			document.getElementById("id_button_submit").disabled = "disabled";
			document.getElementById("id_div_message_returned").innerHTML = "";
		}
};
 
-->
</script> 
 
 
 
<form method="POST" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" enctype="multipart/form-data">
     <input type="hidden" name="MAX_FILE_SIZE" value="70000000">
     Fichier : <input type="file" name="avatar">
     <input type="submit" name="envoyer" id="id_button_submit" value="Envoyer le fichier">
</form>
 
<div id="id_div_message_wait" style="color:red; font-size:9pt; display:none;">
	<br />
	Veuillez patienter, traitement en cours...
	<br />
	<img id="id_img_upload" src="../general/img/chargeur.gif" /> 
</div>
 
 
<?php
if( isset($message_upload) && $message_upload != 1)
{
?>
 
	<div id="id_div_message_returned" style="color:red; font-size:8pt;">
		<br />
<?php
                echo $message_upload;
                unset($message_upload);
?>
	</div>
<?php   
}
 
?>

et voici le fichier de traitement upload.php :

Code :

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

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
 
<?php
 
sleep(1);
 
$message_upload = 1;
 
 
$dossier = 'upload/';
$fichier = basename($_FILES['avatar']['name']);
$taille_maxi = 100000;
$taille = filesize($_FILES['avatar']['tmp_name']);
$extensions = array('.png', '.gif', '.jpg', '.jpeg', '.txt');
$extension = strrchr($_FILES['avatar']['name'], '.'); 
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
     $message_upload = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
if($taille>$taille_maxi)
{
     $message_upload=  'Le fichier est trop gros...';
}
if(!isset($message_upload)) //S'il n'y a pas d'erreur, on upload
{
     //On formate le nom du fichier ici...
     $fichier = strtr($fichier, 
          'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
          'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     if(move_uploaded_file($_FILES['avatar']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
     {
          $message_upload= 'Upload effectué avec succès !';
     }
     else //Sinon (la fonction renvoie FALSE).
     {
          $message_upload= 'Echec de l\'upload !';
     }
}
 
?>

Ce code fonctionne sous FF, autrement dit, que lorsque je clique sur le bouton de soumission, le message de patienter s'affiche et que dès le traitement terminer, ça s'en va pour laisser place au message d'erreur.
Mais ça ne marche pas sous IE!!!! c'est à dire, qu'il reste bloqué sur le message "Veuillez patienter, traitement en cours", et je ne vois vraiment pas pourquoi ?!?

Ah oui, et permettez moi de préciser : lorsque je commentairise cette ligne dans mon fichier test.php

Code :

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

1
2
 
//document.getElementById("id_button_submit").disabled = "disabled";

Et bien ca marche presque, mais bizzarement l'animation .gif ne bouge plus... par contre ca affiche bien :

1. veuillez patienter...
2. et ensuite le message de retour du formulaire

Voici donc mon problème, si quelqu'un a une idée parce que la... je suis un peu larguer!!

Merci.

**DoubleU** · 23/06/2009, 09h06

Essaie

Code :

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

document.getElementById("id_button_submit").disabled = false;

Sinon, question bete, mais c'est quoi l'erreur que te renvoie IE?

**benthebest** · 23/06/2009, 09h50

Envoyé par DoubleU

Essaie

Code :

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

document.getElementById("id_button_submit").disabled = false;

Sinon, question bete, mais c'est quoi l'erreur que te renvoie IE?

Ben j'ai essayé mais ça produit la même chose que si je commentairisais la ligne que j'ai mentionné plus haut... (à mon avis c'est normal car ce n'est pas la bonne syntaxe, donc c'est comme si c'était en commentaire).

Sinon ta question n'est pas bête mais je ne crois pas qu'IE renvoie une erreur!! Peut-être que je me trompe, peux-tu me dire comment verifier les erreurs renvoyéss? (je suis vraiment naze en JS

)

**andry.aime** · 23/06/2009, 10h18

Salut,
style.display doit prendre la valeur 'none' ou "block", et disabled "true" ou "false".

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language="JavaScript">
<!--
window.onload = function()
{
	document.getElementById("id_div_message_wait").style.display = "none";
	document.getElementById("id_button_submit").disabled = true;
 
	document.getElementById("id_button_submit").onclick = 
		function ()
		{
			document.getElementById("id_div_message_wait").style.display = "block";
			document.getElementById("id_button_submit").disabled = false;
			document.getElementById("id_div_message_returned").innerHTML = "";
		}
};
 
-->
</script>

**benthebest** · 23/06/2009, 10h34

andry.aime merci de ta réponse, j'ai fais ce que tu as écrit mais ça ne change rien, c'est toujours pareil...

**benthebest** · 23/06/2009, 11h44

J'ai même essayé de remplacer le display:none par visibility:hidden mais ça produit le même résultat : ça marche sous FF mais pas sous IE...

C'est à n'y rien comprendre ?!?

Est-on sure qu'il faut mettre ce code dans le

Code :

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

1
2
 
window.onload = function()

Peut-être ca viens de la?

**E.Bzz** · 23/06/2009, 12h32

Bonjour,
je comprends pas l'intérêt de ton onload : tu peux faire tout ça plus simplement en PHP lors de la génération de la page

A+

**benthebest** · 23/06/2009, 12h36

Avec PHP, je ne peux pas mettre un message d'attente puis de l'enlever et de le remplacer par un message de retour!!

En tout cas, je n'ai jamais entendu ça et si on peut le faire je serai curieux de savoir comment

**andry.aime** · 23/06/2009, 12h40

Sinon,
Essayer avec :

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/JavaScript">
function fonction()
{
	document.getElementById("id_div_message_wait").style.display = "none";
	document.getElementById("id_button_submit").disabled = true;
 
	document.getElementById("id_button_submit").onclick = 
		function ()
		{
			document.getElementById("id_div_message_wait").style.display = "block";
			document.getElementById("id_button_submit").disabled = false;
			document.getElementById("id_div_message_returned").innerHTML = "";
		}
};
</script>

Code HTML :

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

<body onload="fonction()">

**benthebest** · 23/06/2009, 13h09

Non malheureusement ça ne marche pas

**andry.aime** · 23/06/2009, 13h27

document.getElementById("id_button_submit").disabled = true;

document.getElementById("id_button_submit").onclick =
function () .....

Le bouton id_button_submit est désactivé. Tu n'as pas accès à l'évenement onclick.

document.getElementById("id_button_submit").onclick =function ()
{
document.getElementById("id_div_message_wait").style.display = "block";
document.getElementById("id_button_submit").disabled = false;
document.getElementById("id_div_message_returned").innerHTML = "";
}

Tu le réactives avec son click qui lui même est désactivé ?

**benthebest** · 23/06/2009, 13h35

Non non rassure toi j'avais bien remarqué ça et j'avais déjà changer le code :

Code :

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

1
2
 
document.getElementById("id_button_submit").disabled = false;

et

Code :

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

1
2
3
4
5
6
7
 
document.getElementById("id_button_submit").onclick =function ()
{
document.getElementById("id_div_message_wait").style.display = "block";
document.getElementById("id_button_submit").disabled = true;
document.getElementById("id_div_message_returned").innerHTML = "";
}

**andry.aime** · 23/06/2009, 13h59

Essaie avec

Code :

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

1
2
3
4
5
6
document.getElementById("id_button_submit").onclick =function ()
{
document.getElementById("id_div_message_wait").style.display = "block";
document.getElementById("id_div_message_returned").innerHTML = "";
document.getElementById("id_button_submit").disabled = true;
}

**DoubleU** · 23/06/2009, 14h05

Normalement, sous Ie quand tu as une erreur, tu as un petit panneau triangulaire genre "attention" dans la barre de statut du navigateur, en bas a gauche. En cliquant dessus tu devrais avoir une fenêtre avec le détail de l'erreur.

**benthebest** · 23/06/2009, 14h14

andry.aime ça ne marche toujours pas...

DoubleU, c'est bien ce que je pensais, donc il n'y a pas d'erreur non plus...

**E.Bzz** · 23/06/2009, 14h16

Envoyé par benthebest

DoubleU, c'est bien ce que je pensais, donc il n'y a pas d'erreur non plus...

Vérifie quand même que la notification des erreurs de script est activée, dans les options du nav' ...

A+

**benthebest** · 23/06/2009, 14h37

Ok, effectivement j'ai rajouté les notifications et lorsque je lance ça me met une erreur: voir ma piece jointe.

Et ce qui est bizzare c'est qu'à la ligne 85 il n'y à rien sinon à la ligne 87 il y a ceci :

Code :

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

1
2
 
document.getElementById("id_button_submit").onclick =

Bref, ça ne résoud pas vraiment mon chmilblick, qu'en pensez vous?
L'avez-vous tester chez vous? est-ce que ca marche ou chez vous aussi ça fait la même chose?

**E.Bzz** · 23/06/2009, 14h44

Je me trompe ou tu essayes de réactiver le bouton submit dans son onclick ?

A+

**benthebest** · 23/06/2009, 14h46

Non au contraire, je tente de le désactiver lorsque l'user click dessus

Code :

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

1
2
 
document.getElementById("id_button_submit").disabled = true;

**E.Bzz** · 23/06/2009, 14h48

OK
On peut revoir le code dans son état actuel : y a eu pas mal de changements et on ne sait pas ce que tu as garder ou modifier ...

A+

Soumission et retour formulaire

JavaScript

Discussions similaires

Partager

Partager