Afficher une couleur suite à un post

**totofe49** · 07/10/2010, 17h54

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 :

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

**vermine** · 07/10/2010, 20h32

Bonsoir,

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

**totofe49** · 07/10/2010, 21h54

Merci

Voici le code modifié :

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

Afficher une couleur suite à un post

JavaScript

Vue hybride

Discussions similaires

Partager

Partager