Discussion :

[vbaguet]

Bonjour à tous,

Voici ma première petite expérience en Javascript / Jquery, je voudrais vous demander votre avis, si il y a moyen de simplifier mon code, car quand on débute on a toujours tendance à compliquer les choses. Ici, je veux juste afficher un paneau quand on clique sur un bouton et que le bouton change d'etat suivant que la panneau est visible ou non.

Au fait j'aimerais rendre mon bouton non cliquable, apres le click sur le bouton submit, c'est possible ?

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
 
 
<script type="text/javascript">
				$(window).load(function(){ 
 
					//$('#shareinfos').hide();
 
					$('#image').click(function() { 
						if($('#shareinfos').hasClass('active'))
						{
							$('#shareinfos').removeClass("active");
							$('#shareinfos').fadeOut(600);
							$(this).val("Soumettre mon oeuvre");
							$(this).css('border', '1px dashed #999');
							$(this).css('color', '#333');
						}
						else
						{
							$('#shareinfos').addClass("active");
							$('#shareinfos').fadeIn(600);
							$(this).val("Annuler");
							$(this).css('border', '1px dashed #696');
							$(this).css('color', '#696');
						}
					})
 
					// Detect form submit and send to processor
					$('#shareform').submit(function() {
 
						save();
 
						// Get form data to send to php script
						var data = $(this).serialize();
 
						// Send form data via Ajax
						$.ajax({
							url: 'scripts/save.php',
							type: 'POST',
							data: data,
 
							// On success of sending dispay the message
							success: function(){
    							$('#shareinfos').slideUp(500);
								$('#message').text("Votre oeuvre a été correctement envoyée. Pour la télécharger cliquez ici.");
							}
						});
 
						return false;
 
					});	
 
				});
 
				function save()
				{
					var canvasData = document.getElementById("draw-panel")
					var canvasData = canvasData.toDataURL("image/png");
					var ajax = new XMLHttpRequest();
					ajax.open("POST",'scripts/savepic.php',false);
					ajax.setRequestHeader('Content-Type', 'application/upload');
					ajax.send(canvasData );
				}
 
			</script>

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
 
<div class="right">
 
        	<h2>Informations sur votre oeuvre</h2>
            <p>Laissez libre cours à votre imagination</p>
 
            <p>Indiquez ensuite votre nom et le titre de votre oeuvre.</p>
 
            <input type="button" name="image" id="image" value="Soumettre mon oeuvre" />
 
        <div id="shareinfos" style="margin-top: 15px; display: none;">
 
    		<form name="shareform" id="shareform">
            	<label for="name">Votre nom</label><br />
                <input type="text" name="name" /><br />
                <label for="title">Titre de votre oeuvre</label><br />
 
                <input type="text" name="title" /><br />
                <input type="submit" name="post" value="Partager" />
            </form>
 
            <p id="message"></p>
 
		</div>
 
        </div>

Merci d'avance

[danielhagnoul]

Bonsoir

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
// l'ID "image" est un tag input !!!
$('#image').click(function(){ 
	if ($('#shareinfos').hasClass('active')){
		$('#shareinfos')
			.removeClass("active")
			.fadeOut(600);
 
		$(this)
			.val("Soumettre mon oeuvre")
			.css({
				'border': '1px dashed #999',
				'color': '#333'
			});
	} else {
		$('#shareinfos')
			.addClass("active")
			.fadeIn(600);
 
		$(this)
			.val("Annuler")
			.css({
				'border': '1px dashed #696',
				'color': '#696'
			});
	}
});
 
$('#shareform').submit(function(){
	save();
 
	// Get form data to send to php script
	var data = $(this).serialize();
 
	// Send form data via Ajax
	$.ajax({
		url: 'scripts/save.php',
		type: 'POST',
		data: data,
 
		// On success of sending dispay the message
		success: function(){
			$('#shareinfos').slideUp(500);
			$("#image").hide("slow");
			$('#message').text("Votre oeuvre a été correctement envoyée. Pour la télécharger cliquez ici.");
		}
	});
 
	return false;
});