Discussion :

[Rony Rauzduel]

Bonjour à toutes et à tous,

J'ai effectué un test sur mon formulaire d'ajout d'annonce disposant d'un captcha, je constate que si l'utilisateur fait x tentatives fausses de saisie du code du captcha et qu'il saisisse enfin le bon code alors le message de réussite s'affiche x fois.
Pourtant j'ai mis ce message dans un .text() et non dans un .append()

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
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
 
/** script permettant l'affichage de la zone d'ajout d'annonces **/
//le script a été modifié pour permettre l'upload de photo en requete AJAX 
//IL FAUT ABSOLUMENT PASSER PAR UN IFRAME sinon c'est impossible
//on récupère ainsi dans les balises 'iframe' lors du chargement, le contenu html des balises <span> ayant pour id 'reponse'
//La balise <span> aura la réponse à traiter 
$(function(){
	// le chargement de la réponse du serveur se fera lors du clic sur le bouton de soumission du formulaire  
	// ET NON AU CHARGEMENT DE LA PAGE!
	$(":submit").click(function() { 
		$("#loader").show();
		$("#iframe").load(function(event){
			event.preventDefault();				
			var rep = $(this).contents().find('#reponse').html();								
			success : 							
				if(rep=="ok") {
					$("#loader").hide(); // on cache le loader d'attente Ajax					
					$('.annonceSent').show("fast").text("L'upload s'est correctement effectué. Un email de confirmation a été envoyé");										
					$('.annonceSent').fadeOut(3000);				
					//$('#annonceFormContainer').fadeOut(4000);
					$(":input", "#annonceForm").not(':submit').val("");	
					$("#captchaImage").attr("src", "image.php?text");// permet de regénérer uniquement que le captcha sans vider le formulaire				
				}
				else{
					if(rep.substr(0,7)=="captcha") {
					$("#loader").hide(); // on cache le loader d'attente Ajax				
					$('.annonceSent').show().text("Veuillez saisir CORRECTEMENT le code du captcha!");
					$('#captcha').val("");
					$('#captcha').focus;							
					$('.annonceSent').fadeOut(5000);
					//$("#reponse").hide();		
					$("#captchaImage").attr("src", "image.php?text");// permet de regénérer uniquement que le captcha sans vider le formulaire							
				} // fin if(rep == "Erreur")
				if(rep.substr(0,6)=="Erreur") {
					$("#loader").hide(); // on cache le loader d'attente Ajax				
					$('.formErreur').show().text("Erreur lors de l'upload!");
					$('.formErreur').fadeOut(5000);					
				} // fin if(rep == "Erreur")
				if(rep.substr(0,7)=="Fichier") {
					$("#loader").hide(); // on cache le loader d'attente Ajax
					$('.formErreur').show().text("Le fichier uploadé est trop volumineux!");
					$('.formErreur').fadeOut(5000);
				} // fin if(rep == "fichier")	
				if((rep.substr(0,4)=="vide") || (rep.substr(0,7)=="Absence")) {
					$("#loader").hide(); // on cache le loader d'attente Ajax
					$("#titre").focus();
					$('.formErreur').show().text("Veuillez remplir tous les champs!");
					$('.formErreur').fadeOut(5000);						
				} // fin if(rep == "vide"ou "Absence")	
				//window.location.reload(); //en cas d'erreur, il faut recharger la page entièrement pour regénérer correctement le CAPTCHA
 
 
				//ne fonctionne pas correctement : 
				//le captcha est bien regénéré mais le code n'est pas valide! (j'ai l'impression qu'il y a un affichage trop rapide du captcha à saisir)
				//pour le tester, rajouter un span avec id captchaImage 
			} // fin else
 
		}); // fin $("#iframe")		
	}); // fin $(":submit").click()
});// fin $(function())

Merci d'avance.
Transact.

[SpaceFrog]

je ne vois pas de preventDefault() ni de return false lors du submit ...

[Rony Rauzduel]

J'ai mis un e.preventDefault() et un return false mais cela ne change rien.

[danielhagnoul]

je ne vois pas de preventDefault() ni de [ ou un ] return false lors du submit ...

Code :

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

1
2
3
4
5
6
7
8
9
10
$( ":submit" ).click( function(){ 

	$( "#loader" ).show();

	$( "#iframe" ).load( function( event ){
		
	});
	
	return false;
});

Le sélecteur $( ":submit" ) est bon ?

EDIT, ok, http://api.jquery.com/submit-selector/

[Rony Rauzduel]

En utilisant la méthode de danielhagnoul cela ne fonctionne toujours pas , le $(":submit") est bon puisqu'avant le message était récupéré.

[Bovino]

Personnellement, j'ai du mal à comprendre ce que tu fais avec

Code :

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

$("#iframe").load(function(event)

Je suppose que #iframe correspond à une iframe et que celle-ci pointe sur le même domaine, mais tu sembles agglomérer dans .load() la méthode correspondant à l'événement (utilisation de event) et celle correspondant au raccourci AJAX (utilisation de success).

[Rony Rauzduel]

Dans le formulaire HTML (non transmis dans ce post), je dois envoyer sur le serveur des données de type FILE (upload de fichier) et des champs input type="text". L'inconvénient est que les champs de type FILE ne sont pas transmis en AJAX, pour "duper" le serveur j'ai utilisé une solution de contournement récupérant la réponse du serveur que j'intègre dans une iframe.

Code html :

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

1
2
3
4
5
 
<iframe src="#" id ="iframe" name ="iframe" width = "900px" height ="100px"></iframe>										
				<form name="ajoutAnnonce" id="annonceForm" enctype="multipart/form-data" action="#" method="post" target="iframe">
....
</form>

Code php :

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

1
2
3
4
 
//Message à traiter pour le jquery			
echo "<span id='reponse'>ok</span>";
echo "<span id='reponse'>Erreur</span>";

Le problème est que le message de réussite s'affiche x fois si il y a eu x tentative de saisie du captcha.