Discussion :

[chuspyto]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci d'avance pour votre aide

[NoSmoking]

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

(...)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.

[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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[NoSmoking]

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

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.

[chuspyto]

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

[lalouve]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[chuspyto]

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

@lalouve :

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

[lalouve]

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

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
<?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>';

[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

[lalouve]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

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

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
<?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>';

[chuspyto]

Aprés quelques modification dans mon code tout marche nickel,je te remercie pour ton éfficacité

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

[lalouve]

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<select id="idsalle" name="salle" onchange="onSalleChanged.apply(this);">';

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci