Discussion :

[francky74]

Bonjour,

Je souhaite exécuter une fonction suite à un clic souris dans un champs <select>. De plus, je souhaite passer la value de l'option cliquée en argument à cette fonction.

Pour l'instant, voici, en partie, ce que j'ai codé, mais je galère pas mal, je suis en terrain inconnu et je progresse avec beaucoup de mal. Merci à ceux qui veulent bien me filer un coup de main !

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
<form method="post" action="envoiforms/services.php" id="fen1">
<script>
function servselect(sel) {
    document.getElementById("hmilieu").innerHTML = "YOU CLICKED ME!" + sel.value;
}
</script>
<?php 
	try
	{
		$bdd = new PDO('mysql:host=localhost;dbname=mairie_saubens;charset=utf8', 'root', '');
	}
	catch (Exception $e)
	{
		die('Erreur : ' . $e->getMessage());
	}
	$reponse1 = $bdd->query('SELECT servMair_nom FROM services_mairie');
	$reponse2 = $bdd->query('SELECT pers_nom FROM personnes');
?>
 
	<div class="divparamBDD" id="divhaut">
		<div class="spancolor" id="hgauche">
			<div id="cadreservices">
				<h2>Services mairie</h2>
					<select name="selectservices" size="5" id="textareaservices" onChange="servselect(this)">
				<?php
                                        while($donnees1 = $reponse1->fetch())
                                        {
                                                echo'<option value="'.$donnees1['servMair_id'].'">'.htmlspecialchars($donnees1['servMair_nom'])."</option>\r\n";
                                        }
                                        echo'</select>';
                                $reponse1->closeCursor();
                                ?>
			</div>
		</div>

Je n'ai pas d'erreur de la part d'eclipse.

le but de cette manip sera de rafraîchir un autre champs en fonction de la valeur cliquée dans le <select> ci-dessus.

Merci,

[Bovino]

Code :

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

document.getElementById("hmilieu")

Elle est où la balise dont l'id est hmilieu ?

le but de cette manip sera de rafraîchir un autre champs

S'il s'agit d'un champ, (balise <input> logiquement), il n'y a pas de innerHTML...

Sinon

Code html :

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

<select id="textareaservices">

Un select dont l'id est textarea, c'est pas banal !

Pour finir, on évite de mettre des balises <script> en plein milieu du code HTML, c'est pas terrible comme façon de faire.

[francky74]

Bonjour,

Merci pour votre réponse !!! et désolé pour ma réponse tardive (réunion infinie, enfants ...)

Elle est où la balise dont l'id est hmilieu ?

Tout simplement, j'avais écourté le code pensant que cela n'était pas important pour le comportement du "onChange". je vais poster le code en entier à la fin de ce post ! méa culpa !

S'il s'agit d'un champ, (balise <input> logiquement), il n'y a pas de innerHTML...

Tout à fait ! par contre, le innerHTML était juste là afin de me procurer une sortie graphiquement visible histoire de débugger ... le but est vraiment de contrôler un autre <select> mais comme je n'arrivais déjà pas récupérer mon attribut, j'ai voulu l'afficher pour contrôler. D'où le innerHTML.

Un select dont l'id est textarea, c'est pas banal !

j'en conviens ! ceci montre bien que j'ai essayé plusieurs choses avant d'arriver à ce point ! j'avais essayé le <textarea> à la place du <select> et j'en ai gardé l'id qui devrait disparaître aussitôt mon problème réglé

Pour finir, on évite de mettre des balises <script> en plein milieu du code HTML, c'est pas terrible comme façon de faire.

-> plutôt dans le head ? et comme mon fichier php est inclus dans une autre page, vaut-il mieux que je mette mon <script> dans le header de l'autre page alors ?

Bon, j'ai quand même résolu mon problème grâce à mon prof de l'AFPA qui est venu me voir sur le lieu de mon stage (car je suis en stage ...). Voici ce à quoi j'aurais dû penser :
faire un clic droit sur le navigateur et vérifier le "code source de la page" afin de vérifier si déjà mes <option> contiennent bien les values. Et c'est ainsi que nous nous sommes apperçus que mes values étaient vides !!!
La cause de ces values vides était que je n'avait tout simplement pas fait l'appel dans la requête. En ligne 16 on voit la requête

Code :

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

$reponse1 = $bdd->query('SELECT servMair_nom FROM services_mairie');

Celle-ci ne contient pas la valeur "servMair_id" que je donne à value en ligne28

Code :

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

echo'<option value="'.$donnees1['servMair_id'].'">'.htmlspecialchars($donnees1['servMair_nom'])."</option>\r\n";

Bon ensuite je me suis débrouillé tout seul ce matin et j'ai opté pour un onclic plutôt qu'un onChange.

Quelqu'un pourrait-il me dire les différences ou les pièges lorsque l'on utilise l'un ou l'autre ?

Merci beaucoup !!!!

mon code php :

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
65
<form method="post" action="envoiforms/services.php" id="fen1">
<script>
function servselect(id) {
    document.getElementById("hmilieu").innerHTML = "YOU CLICKED ME!" + id;
}
</script>
<?php 
        try
        {
                $bdd = new PDO('mysql:host=localhost;dbname=bdd;charset=utf8', 'root', 'rrrr');
        }
        catch (Exception $e)
        {
                die('Erreur : ' . $e->getMessage());
        }
        $reponse1 = $bdd->query('SELECT servMair_id, servMair_nom FROM services_mairie');
        $reponse2 = $bdd->query('SELECT pers_nom FROM personnes');
?>
 
	<div class="divparamBDD" id="divhaut">
		<div class="spancolor" id="hgauche">
			<div id="cadreservices">
				<h2>Services mairie</h2>
					<select name="selectservices" size="5" id="textareaservices">
				<?php
                                        while($donnees1 = $reponse1->fetch())
                                        {
                                                echo'<option value="'.$donnees1['servMair_id'].'" onclick="servselect(this.value)">'.htmlspecialchars($donnees1['servMair_nom'])."</option>\r\n";
                                        }
                                        echo'</select>';
                                $reponse1->closeCursor();
                                ?>
			</div>
		</div>
		<div class="spancolor" id="hmilieu">
		hmilieu
		</div>
		<div class="spancolor" id="hdroite">
		hdroite
		</div>
	</div>
	<div class="divparamBDD" id="divbas">
		<div class="spancolor" id="bgauche">
			<div id="cadrepersonnes">
				<?php
                                echo '<h2>Personnel attaché au service</h2>';
                                        echo'<select size="5" id="textareapersonnes">';
                                        while($donnees2 = $reponse2->fetch())
                                        {
                                                echo'<option value="'.$donnees2['pers_id'].'">'.htmlspecialchars($donnees2['pers_nom'])."</option>\r\n";
                                        }
                                        echo'</select>';
                                $reponse2->closeCursor();
                                ?>
			</div>
		</div>
		<div class="spancolor" id="bmilieu">
		bmilieu
		</div>
		<div class="spancolor" id="bdroite">
		bdroite
		</div>
	</div>
	</div>
</form>