Afficher une couleur suite à un post

Version imprimable

Bonjour à tous,
J'ai un petit script qui me permet de sélectionner une coleur hexadecimale dans un menu déroulant et d'afficher son équivalent couleur.
Jusque là pas de soucis. Mais quand je clique sur le bouton submit ma valeur reste sélectionnée dans mon déroulant mais la couleur de s'affiche plus ?
Comment faire ?
merci pour votre aide.

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
 
<style>
.color { width: 20px; height: 20px; float: left;  }
</style>
 
<?php
if(isset($_POST)){
    echo "Vous avez choisi une couleur de personnalisation : " .$_POST['color'];
}
?>
 
<table>
    <tr>
	<td>
	<form name="perso" method="post" action="">
	    <select name="color" class="sColor">
		<option></option>
		<option value="FF9DD3" <?php if($_POST['color'] == "FF9DD3") echo "selected"; ?>>Rose</option>
		<option value="FF5D20" <?php if($_POST['color'] == "FF5D20") echo "selected"; ?>>Orange</option
		<option value="F1E67C" <?php if($_POST['color'] == "F1E67C") echo "selected"; ?>>Anis</option>
	    </select>
	    <input type="hidden" id="choiceColor" name="colorPerso" value=""/>
	    <input type="submit" name="submit" value="Commander"/>
	</form>
	</td>
	<td class="color">    
	</td>
    </tr>
</table>
 
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
    $(function(){
	$("select.sColor").change(function(){
	    var color = $(this).val();
	    var carreColor = '<div class="color" style="background-color: '+color+'">&nbsp;</div>';
	    $("td.color").html(carreColor);
	    $("#choiceColor").val(color);
	    return false;
	});
    });
</script>

07/10/2010, 20h32
vermine

Bonsoir,

C'est parce que vous appelez votre fonction uniquement lors du onchange sur le select. Appelez-là aussi lors du onload du body.

Merci

Voici le code modifié :

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
<html>
<head>
<style>
.color { width: 20px; height: 20px; float: left;  }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function color(){
        var color = $("select.sColor").val();
        var carreColor = '<div class="color" style="background-color: '+color+'">&nbsp;</div>';
        $("td.color").html(carreColor);
        $("#choiceColor").val(color);
        return false;
    }
</script>
</head>
 
<body onload="color();">
<?php
if(isset($_POST)){
    echo "Vous avez choisi une couleur de personnalisation : " .$_POST['color'];
}
?>
 
<table>
    <tr>
	<td>
	<form name="perso" method="post" action="">
	    <select name="color" class="sColor">
		<option></option>
		<option value="FF9DD3" <?php if($_POST['color'] == "FF9DD3") echo "selected"; ?>>Rose</option>
		<option value="FF5D20" <?php if($_POST['color'] == "FF5D20") echo "selected"; ?>>Orange</option
		<option value="F1E67C" <?php if($_POST['color'] == "F1E67C") echo "selected"; ?>>Anis</option>
	    </select>
	    <input type="hidden" id="choiceColor" name="colorPerso" value=""/>
	    <input type="submit" name="submit" value="Commander"/>
	</form>
	</td>
	<td class="color">    
	</td>
    </tr>
</table>
</body>
 
<script type="text/javascript">
    $(function(){
        $("select.sColor").change(function(){
            color();
        });
    });
</script>