insérer image dans un code javascript

Version imprimable

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:

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:

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

Code:

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:

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

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:

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

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:

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

JAVASCRIPT

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
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