Discussion :

[brisso]

bonjour,
je ne m'y connais pas du tout en js et je cherche à insérer mon petit load.gif dans un code js d'envoi d'email.
Je voudrais que lorsque l'envoi est en cours l'image apparaisse.

voilà le js en question :

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
 
$(document).ready(function(){
			$('#send_message').click(function(e){
 
				e.preventDefault();
 
				var error = false;
				var name = $('#name').val();
				var email = $('#email').val();
				var subject = $('#subject').val();
				var message = $('#message').val();
 
 
				if(name.length == 0){
					var error = true;
					$('#name_error').fadeIn(1000);
				}else{
					$('#name_error').fadeOut(1000);
				}
				if(email.length == 0 || email.indexOf('@') == '-1'){
					var error = true;
					$('#email_error').fadeIn(1000);
				}else{
					$('#email_error').fadeOut(1000);
				}
				if(subject.length == 0){
					var error = true;
					$('#subject_error').fadeIn(1000);
				}else{
					$('#subject_error').fadeOut(1000);
				}
				if(message.length == 0){
					var error = true;
					$('#message_error').fadeIn(1000);
				}else{
					$('#message_error').fadeOut(1000);
				}
 
				if(error == false){
 
					$('#send_message').attr({'disabled' : 'true', 'value' : '<img src="images/load.gif" /> Envoi en cours...' });
 
					$.post("emailenvoi.php", $("#contact_form").serialize(),function(result){
 
						if(result == 'sent'){
 
							 $('#button').remove();
 
							$('#mail_success').fadeIn(1000);
						}else{
 
							$('#mail_fail').fadeIn(1000);
 
							$('#send_message').removeAttr('disabled').attr('value', 'Envoyer');
						}
					});
				}
			});    
		});

comme vous pouvez le constater j'ai bêtement mis une balise html mais cela ne fonctionne pas.
j'ai trouvé des choses comme ça mais cela ne correspond pas avec mon code :

Code :

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

strRLabel = "<img src=\"verwijder.gif\" alt=\"Verwijder\">";

Code :

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

elt.pasteHTML("<img src=\"../icon/fullcart.gif \" />");

Merci par avance pour votre aide .

EDIT : je viens d'essayer ceci mais cela ne fonctionne toujours pas:

Code :

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

$('#send_message').attr({'disabled' : 'true'}).html('<img src="images/load.gif" /> Envoi en cours...');

[brisso]

Bonjour,
je n'ai toujours pas trouvé ma solution.
J'ai essayé de contourner le problème en supprimant la class et en la changeant mais cela ne fonctionne pas et ne fait que supprimer la classe sans la rajouter.

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
					$('#send_message').attr({'disabled' : 'true', 'value' : 'Envoi en cours...' });
					$('#send_message').removeClass('button').addClass('buttonload');
 
					$.post("emailenvoi.php", $("#contact_form").serialize(),function(result){
 
						if(result == 'sent'){
 
							 $('#button').remove();
 
							$('#mail_success').fadeIn(1000);
						}else{
 
							$('#mail_fail').fadeIn(1000);
 
							$('#send_message').removeAttr('disabled').attr('value', 'Envoyer');
							$('#send_message').removeClass('buttonload').addClass('button');

je ne sais vraiment pas quoi faire. cela me parraît pourtant tout simple mais j'ai du mal à savoir de quel côté cherche ne m'y connaissant pas du tout.

merci

[brisso]

Bon,
après avoir pas mal galéré dans mon coin j'ai finalement trouvé une solution à mon problème.

Plutôt que d'ajouter une image dans mon bouton j'ai créé une div class="cache" que j'ai déclaré dans mon js puis en fonction des évènements du js j'ai changé la classe en visible ou non.

HTML

Code :

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

<div id="loader" class="cache"></div><input type='submit' id='send_message' class="button" value='Envoyer'  />

JAVASCRIPT

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
64
65
66
 
 
$(document).ready(function(){
			$('#send_message').click(function(e){
 
 
				e.preventDefault();
 
				var error = false;
				var name = $('#name').val();
				var email = $('#email').val();
				var subject = $('#subject').val();
				var message = $('#message').val();
				var visible = $('.visible');
				var cache = $('.cache');
				var btn = document.getElementById("loader"); 
 
				if(name.length == 0){
					var error = true;
					$('#name_error').fadeIn(1000);
				}else{
					$('#name_error').fadeOut(1000);
				}
				if(email.length == 0 || email.indexOf('@') == '-1'){
					var error = true;
					$('#email_error').fadeIn(1000);
				}else{
					$('#email_error').fadeOut(1000);
				}
				if(subject.length == 0){
					var error = true;
					$('#subject_error').fadeIn(1000);
				}else{
					$('#subject_error').fadeOut(1000);
				}
				if(message.length == 0){
					var error = true;
					$('#message_error').fadeIn(1000);
				}else{
					$('#message_error').fadeOut(1000);
				}
 
				if(error == false){
 
					$('#send_message').attr({'disabled' : 'true', 'value' : 'Envoi en cours...' });
					btn.className= "visible";
 
					$.post("emailenvoi.php", $("#contact_form").serialize(),function(result){
 
						if(result == 'sent'){
 
							 $('#button').remove();
 
							$('#mail_success').fadeIn(1000);
						}else{
 
							$('#mail_fail').fadeIn(1000);
 
							$('#send_message').removeAttr('disabled').attr('value', 'Envoyer');
							btn.className= "cache";
 
						}
					});
				}
			});    
		});

bonne journée