Affichage sur une liste déroulante

Version imprimable

03/05/2015, 07h59
chuspyto

Affichage sur une liste déroulante

j'ai une liste déroulante dynamique dont les données arrive d'une base de données.
j'ai une petite question concernant la liste deroulante ou j'aimerai que des qu'il y a une valeur d'afficher j'ai une coche qui s'affiche.j'ai reussi a gérer cela pour les input mais pour la liste je ne sais pas.
j'ai éssayé cela mais ma valeur disparait de ma liste dès lors que je selectionne ma valeur alors que la coche est affichée

Code:

<select id="idsalle" name="salle" onchange='document.forms("form1").submit();'/> >

merci d'avance pour votre aide
03/05/2015, 10h33
NoSmoking

Bonjour,
force est d'admettre que je n'ai pas compris le but que tu recherches néanmoins avec

Citation:

(...)mais ma valeur disparait de ma liste dès lors que je selectionne ma valeur(...)

il semblerait qu'il y ait rechargement de la page à la soumission de la FORM.
03/05/2015, 10h58
chuspyto

je vais essayer d'etre plus clair,
ma liste contient plusieurs valeurs :
1ere valeur = aucune
2 eme valeur = premier
3 eme valeur = deuxieme
4 eme valeur = troisieme
5 eme valeur = quatrieme
6 eme valeur =cinquieme
7 eme valeur = sixieme
8 eme valeur = septieme
9 eme valeur =huitieme
10 eme valeur = neuvieme
11 eme valeur = dixieme

ce que j'aimerais faire c'est des la selection d'une valeur comprise entre premier et dixieme j'affiche un icone,pour cela j'utilise cette ligne de code:

Code:

<select id="idsalle" name="salle" onchange='document.forms("form1").submit();'/> >

mais le soucis,si je selectionne par exemple cinquieme ma liste déroulante affiche aucune.
j'aimerai que la liste garde l'affichage cinquieme par exemple
03/05/2015, 11h48
NoSmoking

je te ferais la même réponse que précédemment à savoir

Citation:

il semblerait qu'il y ait rechargement de la page à la soumission de la FORM.

donc la fonction sur l'événement onchange de ton SELECT ne semble pas opportune.
03/05/2015, 11h57
chuspyto

quelle fonction je peux utiliser sur ma liste déroulante pour afficher mon iconesans pour autant effectuer un rechargement du formulaire?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function onSalleChanged() {
    "use strict";
 
    var img = document.getElementById('icon-salle');
 
    if(!img) {
        alert('Error: picture not found in DOM!');
        return false;
    }
 
    img.src = '/images/' + this.options[this.selectedIndex].value + '.png';
 
    return true;
}

Code:

1
2
3
4
5
6
7
8
<select id="idsalle" name="salle" onchange="onSalleChanged"/>
    <option value="empty" selected="selected">Aucune</option>
    <option value="1ere">Première</option>
    <option value="2eme">Deuxième</option>
    ...
    <option value="10eme">Dixième</option>
</select>
<img id="icon-salle" src="/images/empty.png" alt="Salle"/>

merci,est ce que l'on peut adapter ton code avec ce que j'ai deja?
ceci pour la liste déroulante:

Code:

1
2
3
4
5
6
7
8
9
10
<select id="idsalle" name="salle" onchange='onSalleChanged'>
<?php
	$req1=$pdo->query( "SELECT ID, SALLE FROM salle ORDER BY ID ASC;" );
	while($row=$req1->fetch()) {
?>	
         <option value="<?php echo $row['SALLE']; ?>"><?php echo $row['SALLE']; ?></option>
<?php
}
?>
</select>

ceci pour icone:

Code:

1
2
3
4
5
6
7
8
9
<?php
	if (empty($_POST['salle'])) {?>
	<span style="color:#FF0000"	style="font-family: wingdings; font-size: 300%;">&#x2717;</span>
	<?php
	}
    else {?>
	<span style="color:#00FF00"	style="font-family: wingdings; font-size: 300%;">&#x2713;</span>  
	<?php   
	}?>

merci encore

03/05/2015, 15h12
NoSmoking

@lalouve :

Citation:

<select id="idsalle" name="salle" onchange="onSalleChanged"/>

es tu sûr de cette syntaxe ?

@chuspyto :
Il te faut faire ta requête en Ajax et mettre à jour la page au retour.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
function onSalleChanged() {
    "use strict";
 
    var icon = document.getElementById('icon-salle'),
         value = this.options[this.selectedIndex].value;
 
    if(!icon) {
        alert('Error: icon-salle element not found in DOM!');
        return false;
    }
 
    if(0 == value) {
        icon.innerHTML = '&#x2717;';
    } else {
        icon.innerHTML = '&#x2713;';
    }
 
    icon.className = 'salle-' + value;
    return true;
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 
$salle = 0;
 
if(isset($_POST['salle']) {
    $salle = intval($_POST['salle']);
}
 
echo '<select id="idsalle" name="salle" onchange="onSalleChanged">';
$req1 = $pdo->query( "SELECT ID, SALLE FROM salle ORDER BY ID ASC;" );
while($row=$req1->fetch()) {
    echo  '<option value="' . $row['ID'] . '" ' . (($salle == $row['ID'])? 'selected="selected"':'') . '>' . $row['SALLE'] . '</option>';
}
echo '</select>';
 
echo '<span id="icon-salle"  class="salle-' . $salle . '">' . ((0 == $salle)? '&#x2717;':'&#x2713;') . '</span>';

03/05/2015, 16h06
chuspyto

merci pour la modification, 2 petites remarques:

quand la valeur est aucune, je dois avoir une croix rouge( style="color:#FF0000" &#x2717)
quand la valeur est autre qu'aucune mon icone est vert(style="color:#00FF00" &#x2713)
à part c'est nickel

Code:

1
2
3
4
5
 
<style type="text/css">
.empty-salle { color: #F00; }
.selected-salle { color: #0F0; }
<style>

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
 
<script type="text/javascript">
function onSalleChanged() {
    "use strict";
 
    var icon = document.getElementById('icon-salle'),
         value = this.options[this.selectedIndex].value;
 
    if(!icon) {
        alert('Error: icon-salle element not found in DOM!');
        return false;
    }
 
    if(0 == value) {
        icon.innerHTML = '&#x2717;';
        icon.className = 'empty-salle';
    } else {
        icon.innerHTML = '&#x2713;';
        icon.className = 'selected-salle';
    }
 
    return true;
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
 
$salle = 0;
 
if(isset($_POST['salle']) {
    $salle = intval($_POST['salle']);
}
 
echo '<select id="idsalle" name="salle" onchange="onSalleChanged()">';
echo '<option value="0">Choisissez une salle dans la liste</option>';
$req1 = $pdo->query( "SELECT ID, SALLE FROM salle ORDER BY ID ASC;" );
while($row=$req1->fetch()) {
    echo  '<option value="' . $row['ID'] . '" ' . (($salle == $row['ID'])? 'selected="selected"':'') . '>' . $row['SALLE'] . '</option>';
}
echo '</select>';
 
echo '<span id="icon-salle"  class="' . ((0 < $salle)? 'selected-salle':'empty-salle') . '">' . ((0 < $salle)? '&#x2713;':'&#x2717;') . '</span>';

03/05/2015, 17h11
chuspyto

Aprés quelques modification dans mon code tout marche nickel,je te remercie pour ton éfficacité
06/05/2015, 16h38
chuspyto

éffectivement, j'ai été un peu trop vite dans la résolution du message car quand ma valeur change la croix rouge ne passe pas en icone vert automatiquement.
06/05/2015, 22h51
lalouve

Code:

echo '<select id="idsalle" name="salle" onchange="onSalleChanged.apply(this);">';
08/05/2015, 21h18
chuspyto

Merci beaucoup c'est exactement ce qu'il me fallait.
Petite question subsidiaire,
Je peux faire le même principe pour des inputs car j'ai également les mêmes icônes ?
Croix rouge quand pas de valeur et icône vert quand valeur

Code:

<input id="nom" name="Nom" onchange="onchangedselected.apply(this);"/>

Merci