Action d'un événement

**marcel marie** · 08/02/2015, 18h50

Bonjour,
Voici, pour moi, un problème pas évident du fait que je suis novice en JS.
Nom : dates.jpg
Affichages : 76
Taille : 11,8 Ko

l'image des 6 zones doit être jointe !!
Dans un formulaire j'ai les 6 zones ci-dessus pour saisir le jour, le mois et l'année de deux dates.
Cela fonctionne très bien, le code pour une zone est ci-dessous..
Sur une zone, peu importe laquelle je veux activer un événement avec "ONévénement".

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
function affiche_sel_form()
{
  <form name="selint" method=post action="dd_montre_selection.php">
  <table bgcolor=#cccccc>
  <tr>
  <td><font color="#FF0000"><b>du :</b></font> 
  <select name=d_jour>
  <?php
  $j_moi=jdmoi();
  for ($i=0; $i < 31; $i++)
      {
   if ($i+1 == $ce_jour)
   {
     echo "<option value=\"";
        echo $j_moi[$i];
        echo "\"";
  echo 'selected';
        echo ">";
        echo $i+1;
        echo "\n";
   }
      else
      {  
        echo "<option value=\"";
        echo $j_moi[$i];
        echo "\"";
  echo ">";
        echo $i+1;
        echo "\n";   
   }
   }
  ?>
  </select>

Où exactement dois-je mettre l'activation de l'événement : OnEvenement?
Dois-je mettre les "id" indispensables et où pour "form" et pour le champ ?
Où doit être mise la fonction JS qui va s'exécuter lors de l'événement, sachant que le formulaire est dans une fonction html, dans un fichier contenant diverses fonctions ? Dans le programme d'appel de cette dernière ? L'événement doit me permettre d'agir sur l'une quelconque des cinq autres zones.
Souci : le click dans la zone provoque l'affichage de tous les jours du mois.

Je vous remercie. Cordialement.
Marcel Marie

**SylvainPV** · 08/02/2015, 20h55

Oula... novice effictivement

On ne met pas de HTML au milieu de JavaScript. Eventuellement on peut mettre du JS au milieu de HTML avec une balise <script>, mais l'inverse certainement pas.

Où doit être mise la fonction JS qui va s'exécuter lors de l'événement, sachant que le formulaire est dans une fonction html, dans un fichier contenant diverses fonctions ?

Une fonction HTML, ça n'existe pas. Les fonctions sont le propre d'un langage fonctionnel donc JavaScript uniquement.

Sépare complètement le HTML du JavaScript en mettant le JavaScript dans un fichier .js que tu charges avec une balise <script>. Et ne poste pas le code PHP, seulement ce qui est généré côté client (navigateur > clic droit > afficher la source).

Quand toutes les erreurs de syntaxe auront été résolues, on verra pour cette histoire d'évènement. Et quel évènement d'abord ? Un clic ?

**marcel marie** · 09/02/2015, 09h12

Bonjour,
Peut-on supprimer une discussion ? Si OUI comment ?
En effet je me suis réveillé ce matin en me disant que l'âge n'arrange pas les choses !!!!! et je voulais réécrire cette discussion.
Puisqu' il y a eu une réponse voici ce que je voulais écrire :

Le script que j'ai joint n'est autre qu'un morceau de fonction PHP appelé dans un programme PHP.
La question aurait dû être "peut-on dans une telle configuration mettre un événement en action"?
Je ne crois pas à priori puisque la fonction JS doit être entre <head> et </head> (1)

Je vais donc réécrire le tout de deux façons : en mettant cette fonction appelée comme maintenant et (1) ou en l'écrivant dans le programme qui maintenant l'appelle, comme je l'ai fait dans d'autres programmes et où ça fonctionne..

Pour l'événement, peu importe, mais sans doute pas le OnClick puisque le click actuel dans la zone fait afficher toutes les options du <select>.
Le "ONévénement" dans le <select ?
Merci. Bonne journée.
Marcel Marie

**SylvainPV** · 09/02/2015, 09h49

Il y a un bouton Modifier sous chaque message.

PHP s'éxécute côté serveur, JavaScript côté client. Ils n'ont donc aucune interaction donc tu peux parfaitement coder ce qu'il te plaît en JavaScript sans te soucier du code PHP. Seul le code HTML généré importe pour JavaScript, c'est celui que tu trouveras en faisant navigateur > clic droit > afficher la source. Et tu peux placer une balise <script> dans le <head> ou dans le <body>, selon si tu veux que le JavaScript soit interprété avant ou après que le HTML de ta page ait été chargé.

Du reste, je ne comprends pas grand chose à ce que tu essaies de faire. Comment ça, peu importe l'évènement ? Ça me paraît avoir son importance pourtant ! Je reformule: qu'est-ce que tu attends comme action de la part de ton utilisateur pour déclencher ta fonction JavaScript ?

**marcel marie** · 09/02/2015, 16h52

BON, après de nombreux essais ce matin et, après coup, comme toujours, cela est évident.
Le ONévénement fonctionne très bien dans la fonction appelée depuis un .PHP.
Il suffit que dans ce dernier les fonctions JS déclenchées soient écrites, par exemple, entre <script ....> et </script> balises qui sont entre <head> et </head>.
Pour mon cas les ONévénements sont à mettre dans la balise <td ....> tandis que c'est l'id du select qui est testée et modifiée.
OUI, pour moi, dans ce cas, peu importe l'événement dès lors qu'il est bien pris en compte et agit "simplement" car j'ai l'impression que des événements se télescopent ainsi OnMouseDown entraîne automatiquement le OnClick.

Bon c'est donc résolu. MERCI pour votre contribution.
J'ai bien peur que je sois amené à ouvrir d'autres discussions Javascript !!!!.

Cordialement.
Bonne journée.
Marcel Marie

**SylvainPV** · 09/02/2015, 17h17

L'évènement clic est déclenché sous certaines conditions, il faut que la pression et le relâchement du bouton soient fait sans un trop gros déplacement de la souris entre temps, sinon c'est un drag. Donc un clic entraîne forcément un mousedown et un mouseup, mais l'inverse n'est pas forcément vrai.

Je n'ai pas compris ce que tu voulais faire au final, mais tant mieux si tu t'en es sorti

**marcel marie** · 10/02/2015, 10h16

Bonjour SylvainPV
Comme vous avez pu le remarquer sur l'exemple il y a deux zones de dates à remplir, une fourchette.
Il arrive souvent que la fourchette soit UNE journée seulement.
C'EST DEVENU POUR MOI UN CAS D'ÉCOLE : je voudrais que la seconde date soit mise automatiquement à la même valeur que la première car beaucoup d'étourdis dans ce cas ne mettent pas la seconde date, qui mise lors de l'affichage du formulaire se trouve inférieure à la première.
Il y a sans doute une bonne demi-douzaine de façons de le faire.
On peut, entre autres, le programmer dans le programme .PHP "action" appelé par "form", mais comme je veux en apprendre un peu plus sur JV j'essaie d'utiliser les "ONévénement" pour le faire.

Je voudrais bien que cela se fasse au sortir de la zone année de la première ligne. Je n'ai pas trouvé quel événement pourrait être utilisé. La dernière idée était d'utiliser "ONblur" sur cette zone année ("au moment de la perte du focus" me dit un livre) tandis qu'un autre ne mentionne pas ONfocus !!!!!

Je cherche je cherche, je ne trouve pas toujours !!!
J'ai trouvé dans un exemple, je ne comprends pas du tout ?

Code :

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

1
2
3
4
5
6
7
8
9
10
function allumecellule(cell) {
if (cell.className="Aucun style CSS") {
cell.className="cellulesurbrillance";
}
}
function eteincellule(cell) {
if(cell.className="cellulesurbrillance") {
cell.className="Aucun style CSS";
}
}

Pour moi cell devrait être un objet, cela ne semble pas être le cas; cells est un attribut de l'objet "tr"
classname devrait être un "id", on me dit que c'est un attribut de l'objet "Element"
.cellulesurbrillance { se rapporte à du CSS ...)

En quelques mots si ça n'est pas long dites moi SVP comment je dois "lire" ces lignes. (la 2 et la 3)
Comme vous pouvez le constater, j'ai encore du pain sur la planche !!!
Quand je pense à un "zigoto" qui prétend qu'en lisant son livre de 310 pages on devient expert en développement JavaScript !!!!!! gonflé le gars, sans doute un génie ... Mais on s'éloigne un peu de mon sujet, veuillez m'excuser ...
Merci. Bonne journée.

Marcel Marie

**SylvainPV** · 10/02/2015, 10h39

Okay ben quand le besoin est expliqué concrètement, c'est tout de suite plus clair.

L'évènement que tu cherches est "change", il est déclenché quand la valeur sélectionnée change par quelque moyen que ce soit (souris clavier etc...)

L'attribut associé est "onchange" sur l'élément <select>

Voilà une démo :

http://jsbin.com/povetazupu/1/edit?html,output

Code html :

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
 
 
  <form name="selint">    
    du
    <select name="debut_jour" onchange="document.forms.selint.fin_jour.value = this.value">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>etc...</option>
    </select>
    <select name="debut_mois" onchange="document.forms.selint.fin_mois.value = this.value">
      <option>Janvier</option>
      <option>Février</option>
      <option>Mars</option>
      <option>Avril</option>
      <option>etc...</option>
    </select>
    <select name="debut_annee" onchange="document.forms.selint.fin_annee.value = this.value">
      <option>2010</option>
      <option>2011</option>
      <option>2012</option>
      <option>2013</option>
      <option>2014</option>      
      <option>2015</option>      
    </select>
 
    <br/>
    au
    <select name="fin_jour">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>etc...</option>
    </select>
    <select name="fin_mois">
      <option>Janvier</option>
      <option>Février</option>
      <option>Mars</option>
      <option>Avril</option>
      <option>etc...</option>
    </select>
    <select name="fin_annee">
      <option>2010</option>
      <option>2011</option>
      <option>2012</option>
      <option>2013</option>
      <option>2014</option>      
      <option>2015</option>      
    </select>
 
  </form>

Regarde les attributs name et onchange pour comprendre le fonctionnement.

Le bout de code que tu mets en copie n'est pas seulement d'aucune utilité pour toi ici, mais il est aussi bien dégueulasse : il change l'attribut class de l'élément cell en lui mettant trois classes: "Aucun", "style" et "CSS". Ce n'est pas du tout l'objectif désiré, le risque de conflit est important. Je ne sais pas qui a écrit ce code mais tu peux lui balancer ton livre à la figure.

**marcel marie** · 10/02/2015, 16h14

Merci Sylvain,
YOUPEEH, SUPER, ça marche très bien .... facile et efficace ...
Je crois que je n'aurais jamais essayé le "OnChange" . Il était sur la dernière ligne de la page de la liste des événements de mon livre.

Je ne me suis pas contenté d'un copier-coller de votre exemple.
Je crois que j'aurais pu supprimer le "document." de la ligne, je l'ai conservé (pour le moment !) mais j'ai supprimé le "forms."
J'ai également mis un "id= " à toutes les balises pour ne pas oublier la théorie et conserver une homogénéité à l'ensemble.

"Le bout de code dégueulasse" a été trouvé sur Internet et non dans un de mes livres. Il m'a servi à une autre occasion et comme ça fonctionne je l'ai gardé ....
En tout cas, BRAVO et MERCI.
Cordialement. A une prochaine fois.
Marcel Marie

**SylvainPV** · 10/02/2015, 17h20

La référence à document est nécessaire. "forms" peut être retiré, je l'ai mis pour indiquer de chercher les noms uniquement dans les formulaires de la page. Je ne sais pas si c'est plus performant ou non, c'est probablement kif-kif. Les id ne sont pas nécessaires, j'ai tendance à penser que moins il y en a mieux c'est, mais ce n'est que mon point de vue.

**marcel marie** · 10/02/2015, 18h51

dans le cas présenté "document." peut ne pas être indiqué
Marcel Marie

**SylvainPV** · 10/02/2015, 19h21

Seulement lorsque "selint" n'est pas défini en variable globale. Essaie en remplaçant "selint" par "title" ou "status", ça ne fonctionnera plus. C'est beaucoup plus sûr de laisser la référence à document, question de bonnes pratiques. Si on voulait pousser les bonnes pratiques jusqu'au bout, on utiliserait plus du tout les attributs "name" dont le comportement varie selon les navigateurs et vient influer les ID. Mais bon, j'ai voulu rester simple ici.

Action d'un événement

JavaScript

Discussions similaires

Partager

Partager