Vous êtes sur la page 1sur 42

Les événements

Le but de la gestion des événements est de faire réagir la page web aux actions de l’utilisateur
sans passer par le serveur.
C’est de la programmation événementielle : le programme (la page web) réagit à un événement
déclenché par l’utilisateur : cliquer sur un bouton par exemple (button HTML).
On peut aussi réagir à n’importe quel événement : cliquer sur n’importe quelle balise, agrandir
la fenêtre, taper au clavier, etc.
On va regarder le cas des boutons pour une première approche.
Info
Avant de commencer les cours sur les événements, voici quelques exemples concrets.

Exemples d'événements

onChange/ onInput

Quand on change le contenu.


Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea, select.

Exemple1 :input
<form>
<input type="text" id="inp1"value="" onChange="ChangerParOnchange()"/>
<div id="div01"></div>
<input type="text" id="inp2" value="" onInput="ChangerParOninput()"/>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 1


<div id="div02"></div>
</form>
//at1.js
function ChangerParOnchange()
{
var inp1=document.getElementById('inp1');
var div1=document.getElementById('div01');
div1.innerHTML=inp1.value;

}
function ChangerParOninput()
{
var inp2=document.getElementById('inp2');
var div2=document.getElementById('div02');
div2.innerHTML=inp2.value;

Exemple2 : select
<input type="text" id="inp" />
<select name="" id="monais" onchange="Calculer()">
<option value="10">Dollard</option>
<option value="11">Euros</option>
<option value="15">Pond</option>
</select>
<div id="div01"></div>
//at1.js
var div1=document.getElementById('div01'),
inp=document.getElementById('inp'),
sel=document.getElementById('monais');
function Calculer()
{
div1.innerHTML=inp.value * sel.value+" Dhs";

Résultat :

Exemple3 : select
<body >

<select name="color" id="color" >


<option value="red">Red</option>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 2


<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
<div id="div01"></div>

<script src="at1.js"></script>
</body>
/* at1.css */
#div01
{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border:3px solid yellow;
box-shadow: 0px 0px 5px 5px lime;
}
/*at1.js */
var div1=document.getElementById('div01'),
sel=document.getElementById('color');
sel.onchange=Colorer;
function Colorer()
{
div1.style.backgroundColor=sel.value;

onError

Lorsqu'il se produit une erreur de script.


Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML img, body, frame, frameset.
<body >

<script src="at1.js"></script>
</body>
//at1.js
window.onerror=F;
function F(msg,url,line)
{
console.log("Message :",msg);
console.log("Url :",url);
console.log("Line :",line);
}
calculer();

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 3


Si on veut afficher le message : calculer is not defined.

//at1.js
window.onerror=F;
function F(msg,url,line)
{
console.log("Message :",msg);
console.log("Url :",url);
console.log("Line :",line);
}
try {
calculer();//Appel d'une fonction non definie
}
catch (e) {
console.log(e.message);
}

onFocus

Quand un objet gagne le focus.


Est utilisé sur l'objet javascript window, frame, form
Est utilisé sur la balise HTML body, frameset, frame, input.

<form>
<input type="text" value="" onfocus="alert('onfocus')"/>
</form>

onBlur

Lorsque l'objet perd le focus.


Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset.

<form>
<input type="text" value="" onblur="alert('onblur')"/>
</form>

onKeyDown

Quand j'appuie sur la touche.


Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 4


<input type="text" id="inp" onkeydown="Afficher()"/>
<div id="div01"></div>

onKeyPress

Quand j'appuie sur une touche.


Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea

<input type="text" id="inp" onkeypress="Afficher()"/>


<div id="div01"></div>

onKeyUp < == > onInput

Quand je lâche la touche.


Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea et autre.

<input type="text" id="inp" onkeyup="Afficher()"/>


<div id="div01"></div>

De même :
<input type="text" id="inp" oninput="Afficher()"/>
<div id="div01"></div>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 5


onLoad

Lors du chargement.
Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML img, body, frameset, frame
<script>
var div01=document.getElementById('div01');
div01.innerHTML +="JAVASCRIPT";
</script>
</head>
<body >
<div id="div01">HTMl & CSS</div>
<script src="at1.js"></script>
</body>
Apres exécution :

Solution :
<script>
window.onload=function()
{
var div01=document.getElementById('div01');
div01.innerHTML +=" JAVASCRIPT";
}

</script>
</head>
<body >
<div id="div01">HTMl & CSS</div>
<script src="at1.js"></script>
</body>
Apres exécution :

onMouseDown

Quand le bouton de la souris est appuyé.


Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, form et autre.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 6


<div style="width:100px;height:100px;border:1px solid red" onmousedown="alert('onmousedown')"></div>

onMouseMove

Quand le curseur bouge.


Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, form.

onMouseOut

Quand je sors du lien.


Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre.

<form>
<input type="button" value="Bouton" onmouseout="alert('onmouseout')"/>
</form>

<div style="width:100px;height:100px;border:1px solid red" onmouseout="alert('onmouseout')"></div>

onMouseOver

Quand je passe sur le lien


Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 7


<form>
<input type="button" value="Bouton" onmouseover="alert('onmouseover')">
</form>

<div style="width:100px;height:100px;border:1px solid red" onmouseover="alert('onmouseover')"></div>

onMouseUp

Quand le bouton de la souris est relâché.


Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, input, et autre.

<form>
<input type="button" value="Bouton" onmouseup="alert('onmouseup')">
</form>

<div style="width:100px;height:100px;border:1px solid red" onmouseup="alert('onmouseup')"></div>

onMove

Quand je déplace la fenêtre.


Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame.

onReset

Quand je réinitialise.
Est utilisé sur l'objet javascript forms
Est utilisé sur la balise HTML form.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 8


<form onreset="alert('onreset')">
<input type="reset" value="Bouton" />
</form>

onResize

Quand je redimensionne.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame.

onSelect

Quand je sélectionne.
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea.

<form onsubmit="alert('onsubmit')">
<input type="submit" value="Bouton" />
</form>

onSubmit

Quand j'envoie un formulaire.


Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML form.

<form onsubmit="alert('onsubmit')">
<input type="submit" value="Bouton" />
</form>

onUnload

Quand on ferme la fenêtre.


Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame .

onClick

Quand je clique.
Est utilisé sur l'objet javascript link,document, form
Est utilisé sur la balise HTML a, body, area et autre.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 9


<body >
<input type="button" value="Appliquer" onclick="Styler()" />
<div id='div01' style="width:100px;height:100px;border:1px solid red"></div>
<script src="at1.js"></script>
</body>
//at1.js
function Styler()
{
var div1=document.getElementById('div01');
div1.style.backgroundColor="lime";
}

onDblClick

Quand on fait un double clique.


Est utilisé sur l'objet javascript link, document,area
Est utilisé sur la balise HTML a, body, area et autre.

<div style="width:100px;height:100px;border:1px solid red" ondblclick="alert('ondlclick')"></div>

onAbort

L'utilisateur a stoppé le chargement de l'image.


Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset.

Assigner un événement

Infos

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 10


Dans ce chapitre nous allons étudier comment assigner en javascript un événement à un élément HTML .

Types d'événement

Infos

Voici les types d'événement reconnus par l'ensemble des navigateurs à quelques exceptions.

Assigner un événement

Définition

Pour assigner un événement en javascript, vous devez récupérer l'objet javascript qui correspond à la balise
html sur laquelle vous voulez mettre l'événement.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 11


Dans l'exemple suivant, nous voulons assigner un événement onclick sur la balise div ayant comme id
"idevement".
<div id="idevement">Mon événement javascript</div>
//at1.js
function action(){
alert("mon action")
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

L'emploi de this

Définition

Dans la fonction qui est assignée l'événement (Element.onEvement = nomFonction), vous pouvez utiliser
this.
this représente l'objet javascript auquel on a assigné l'événement.
Par exemple nous voulons récupérer l'url du lien sur le onmouseover.
<a href="http://www.zonecss.fr/" id="idevement">Toutes les feuilles de styles css</div>
//at1.js
function action(){
alert(this.href);
//http://www.zonecss.fr/
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

L'objet event

Tableau des couleurs web

Netscape (Mozilla,Firefox) et Internet Explorer ne gèrent pas de la même façon l'objet event. Pour le premier,
l'objet event est passé en paramètre à la fonction qui gère l'événement, pour le second c'est un objet global
window.event.
L'objet event regroupe un ensemble de propriétés relatives à l'événement javascript.
Voici la méthode pour récupérer l'objet event suivant les navigateurs.
Code javascript :
function action(event){
var event = event || window.event;
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

event.type

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 12


La propriété type de l'objet event permet de récupérer le type d'événement.
En règle générale sa valeur est le nom l'événement en minuscule sans le "on". Par exemple : onclick ==
click.
Code javascript :
function action(event){
var event = event || window.event;
alert(event.type);
//click
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

event.target vs event.srcElement

La propriété target de l'objet javascript event permet de récupérer l'objet qui a déclanché l'évenement.
Encore une fois Internet Explorer ne veut pas faire comme tout le monde. Pour lui, c'est srcElement qui
représente l'objet.

Voici la méthode pour récupérer l'objet event suivant les navigateurs.


function action(event){
var event = event || window.event;
var target = event.target || event.srcElement;
alert(target.nodeName);
//DIV
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

Attention

Ce n'est pas forcement l'objet sur lequel est attaché l'événement qui sera renvoyé. Dans le cas ci-dessous si le
div a un événement onclick et que vous avez cliqué sur l'image; c'est l'objet javascript de l'image qui est
renvoyé, puisque c'est lui qui a déclanché l'événement.
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div>

event.clientX et event.clientY

Pour certain événement où la souris intervient comme le onclick, onmouseup, ... , l'objet event a en plus les
propriétés clientX et clientY.
Ces deux propriétés donnent la position du curseur au moment où l'événement a été effectué.
L'origine est le coin haut gauche de la zone de contenu de la fenêtre de votre navigateur.

Propagation des événements

Définition

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 13


Dans le cas où vous avez des balises imbriquées avec le même événement. Les événements se propagent du
bas vers le haut c'est à dire du fils vers le parent.
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div>
//at1.js
function action(){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;
function action2(){
alert("action monimage");
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;

Arrêter la propagation
Imaginons que lorsque l'on clique sur l'image nous ne voulons pas que l'événement du parent soit déclenché.
Pour cela vous devez utiliser la propriété cancelBubble de l'object event qui permet d'arrêter la
propagation de l'événement.
Cependant Firefox conseille l'utilisation de la méthode stopPropagation() de l'objet event à la place de la
propriété cancelBubble.
Nous sommes donc obligés de coupler cancelBubble et stopPropagation.
<div id="idevement">Mon évènement javascript<img src="monimage.gif" id="monimage"></div>
//at1.js
function action(){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;
function action2(){
alert("action monimage");
if (event.stopPropagation)
{
event.stopPropagation();
}
event.cancelBubble = true;
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 14


Annuler l'événement

Infos

Vous pouvez annuler l'action effectuée, par exemple sur un onsubmit (envoi du formulaire).
Pour cela vous devez utiliser la méthode javascript preventDefault() de l'object javascript event qui permet
d'annuler l'événement.
Cependant Intenet Explorer utilise la propriété javascript returnValue de l'objet event.
Nous sommes donc obligés de coupler preventDefault et returnValue.
<form action="http://www.aliasdmc.fr" target="_blank" id="idevement">
<input type="submit" value="envoyer" />
</form>
//at1.js
function action(event){
var event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
var momoElement = document.getElementById("idevement");
momoElement.onsubmit = action;

Assigner un événement DOM 2

Info

Dans ce cours javascript, nous allons nous pencher sur une autre manière d'assigner un événement en
javascript.
Nous allons utiliser le modèle d'événement du DOM 2.
Le modèle d'événement du DOM 2 utilise deux méthodes, addEventListener() et removeEventListener(),
qui permettent assigner ou d'enlever un gestionnaire d'événement à un objet javascript.

La méthode addEventListener()

Définition

la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) permet d'assigner un


événement à un objet javascript.
la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) accepte comme
paramètres :
- nomEvent : valeur de type String qui spécifie le nom de l'événement sans le "on".
- nomFonction : nom de la fonction sans les "()" qui va traiter l'événement.
- typePropagation : valeur de type Boolean qui spécifie le type de propagation de l'événement.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 15


Code html :
<div id="idevement">Mon évènement javascript <img src="monimage.gif" ></div>
//at1.js
function action(event){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.addEventListener("click", action, false);

La méthode attachEvent()

Définition

Comme nous le savons bien Internet Explorer ne fais pas comme tout le monde.
La méthode javascript addEventListener() n'est pas reconnue, il utilise
attachEvent(NomEvent,nomFonction).

La méthode javascript attachEvent(nomEvent, nomFonction) accepte comme paramètres :


- nomEvent : valeur de type String qui spécifie le nom de l'événement avec le "on".
- nomFonction : nom de la fonction sans les "()" qui va traiter l'événement.
Code html :

<div id="idevement">Mon événement javascript <img src="monimage.gif" ></div>


//at1.js
function action(event){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.attachEvent("onclick", action);

Fusion des deux méthodes

Infos

Pour que cela fonction vous devez faire un test :


Code html :
<div id="idevement">Mon événement javascript <img src="monimage.gif"></div>
//at1.js
function action(event){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
if(momoElement.addEventListener){
momoElement.addEventListener("click", action, false);
}else if(momoElement.attachEvent){
momoElement.attachEvent("onclick", action);
}

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 16


Mais vous pouvez regrouper ce test dans une fonction :
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
if (objet.addEventListener) {
objet.addEventListener(typeEvent, nomFunction, typePropagation);
} else if (objet.attachEvent) {
objet.attachEvent('on' + typeEvent, nomFunction);
}
}
function action(event){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);

Supprimer un événement

Définition

Pour Netscape (FireFox,Mozilla) vous devez utiliser la méthode javascript removeEventListener(), pour
Internet Explorer vous devez utiliser detachEvent().
Nous allons donc fusionner ces deux méthodes javascript dans une seule fonction.
Code javascript :
function supprimeEvent(objet, typeEvent, nomFunction, typePropagation){
if (objet.addEventListener) {
objet.removeEventListener(typeEvent, nomFunction, typePropagation);
} else if (objet.attachEvent) {
objet.detachEvent('on' + typeEvent, nomFunction);
}
}

removeEventListener()

Pour que l'action soit enlevée de l'événement, il faut que la valeur "typePropagation" soit la même.
objet.addEventListener('click', nomFunction, true);

objet.removeEventListener(''click'', nomFunction, false);


//La fonction nomFunction est toujours appelée
objet.removeEventListener(''click'', nomFunction, false);
//La fonction nomFunction n'est plus appelée

Cummule des actions

Plusieurs actions pour un même événement

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 17


Les méthodes javascript attachEvent et addEventListener() permettent d'assigner plusieurs fonctions à un
même événement.
Pour cet exemple nous utiliserons la fonction ajouteEvent (voir Fusion des deux méthodes).
Code html :
<div id="idevement">Mon événement javascript</div>
//at1.js
function action(event){
alert("action");
}
function action1(event){
alert("action 1");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);
ajouteEvent(momoElement,"click",action1,false);

Cela peut vous servir pour lancer plusieurs onload. Pour que les fonctions soient déclenchées dans l'ordre
d'assignation à l'événement, vous devez mettre la propriété "typePropagation" à true.

La propagation est différente

Infos

Lorsque vous utilisez l'assignation d'événement DOM 2, Internet Explorer l'événement se propage du bas vers
le haut c'est à dire du fils vers le parent.
Netscape (Firefox/Mozilla) respect la propagation du DOM dans les deux sens. Si "typePropagation" est
égale à true l'événement se propage du haut vers le bas c'est à dire du parent vers le fils. Si
"typePropagation" est égale à false, l'événement se propage du bas vers le haut c'est à dire du fils vers le
parent.
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
if (objet.addEventListener) {
objet.addEventListener(typeEvent, nomFunction, typePropagation);
} else if (objet.attachEvent) {
objet.attachEvent('on' + typeEvent, nomFunction);
}
}
function action(event){
alert("action idevement");
}
var momoElement = document.getElementById("idevement");
ajouteEvent(momoElement,"click",action,false);
//IMG
//DIV

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 18


Les Formulaires

Les éléments de formulaire sont des objets javascript .Supposons le formulaire suivant :

<form name="general">
<input type="text" name="champ1" value="Valeur initiale">
</form>
Accéder au formulaire

Le formulaire est un élément de l'objet document. Pour accéder au formulaire general, il faut écrire :
document.forms["general"] ou document.forms[0] ou document.general.
forms est le tableau des formulaires de document. On peut accéder à un formulaire par son nom ou par son
indice (commençant à 0), via le tableau elements ou directement par son nom.

Accéder à un élément

Pour accéder maintenant à la zone de texte, on écrit :


document.forms["general"].elements["champ1"] ou document.forms["general"].elements[0] ou
document.forms["general"].champ1.
elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou
par son indice, ou directement par son nom.

Remarques :
1. Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de
l'organisation du formulaire.
2. Les tableaux forms et elements peuvent sembler inutiles dans les exemples ci-dessus. Observez
ce script pour vous convaincre du contraire :

var nom_du_champ="champ1";
document.forms[ "general "].elements[nom_du_champ].

Ici, on peut accéder à un élément de formulaire dont le nom est contenu dans une variable javascript.

Manipuler les propriétés d'un élément

Une fois que l'élément est atteint, il est possible de manipuler ces propriétés.
Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :
var input1=document.forms["general"].elements["champ1"]
input1.value="NOUVEAU";

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 19


Appeler une méthode sur un élément

Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus()sur cet
élément.
var input1=document.forms["general"].elements["champ1"]
input1.focus();

L'objet this

Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elements. Un
objet JavaScript this permet de raccourcir ce chemin d'accès.
this représente l'objet javascript en cours.

Donnez le focus à cette zone de texte, un message apparaît dans la barre de titre pour indiquer son nom.
Le message disparaît quand le champ perd le focus.
Voici le code source simplifié par this:

<form name="formfocus">
<input type="text" name="champtexte" value="contenu"
onFocus="document.title=this.value" onBlur="document.title=''">
</form>

L'accès aux éléments de type INPUT

Les zones de texte :


La principale action en javascript sur une zone de texte est de manipuler son contenu.
Imaginons un formulaire appelé monform qui possède un champ texte appelé monchamp. On accède au
contenu du champ par :

<form name="form1">
Nom :<input type="text" name="nom" value="">
</form>
/* test.js */
var inp1=document.forms["form1"].elements["nom"];
inp1.value="Tapez votre nom";

Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

Les boutons :

Un bouton sert principalement à déclencher une action javascript.Nous avons déjà vu comment dans le
paragraphe Intégrer du javascript dans un événement comment détecter le click sur un bouton.
La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible.

Les cases à cocher

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 20


Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked.
Propriété Description
name Indique le nom du contrôle. Toutes les cases à cocher portent un nom différent.
checked Indique l'état en cours de l'élément case à cocher.
defaultchecked Indique l'état du bouton sélectionné par défaut.
value Indique la valeur de l'élément case à cocher.

Exemple1 :

<form name="form1">
<input type="checkbox" name="majeur">Majeur
<input type="checkbox" name="etudiant">Etudiant
<input type="button" value="Tester"
onClick="alert('Majeur : '+document.form1.majeur.checked+'\nEtudiant : '+document.form1.etudiant.checked);">
</form>

Les radio-boutons
Imaginons ce sondage : Vous utilisez comme système d'exploitation :
Propriété Description
name Indique le nom du contrôle. Tous les boutons portent le même nom.
index L’index ou le rang du bouton radio en commençant par 0.
checked Indique l'état en cours de l'élément radio.
defaultchecked Indique l'état du bouton sélectionné par défaut.
value Indique la valeur de l'élément radio.

Exemple 1 :
Entrez votre choix :
<form name="form1">
<input type="radio" checked name="choix" value="1">Choix numéro 1<BR>
<input type="radio" name="choix" value="2">Choix numéro 2<BR>
<input type="radio" name="choix" value="3">Choix numéro 3<BR>

<input type="button"name="but" value="Quel est votre choix ?" onClick="choixProp(form1)">


</form>
/*test.js */

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 21


function choixProp(form1)
{
if (form1.choix[0].checked)
{ alert("Vous avez choisi la proposition " + form1.choix[0].value) };
if (form1.choix[1].checked)
{ alert("Vous avez choisi la proposition " + form1.choix[1].value) };
if (form1.choix[2].checked)
{ alert("Vous avez choisi la proposition " + form1.choix[2].value) };
}

Exemple 2 :
Entrez votre choix :
<form name="form1">
<input type="radio" checked name="choix" value="1">Choix numéro 1<BR>
<input type="radio" name="choix" value="2">Choix numéro 2<BR>
<input type="radio" name="choix" value="3">Choix numéro 3<BR>

<input type="button"name="but" value="Quel est votre choix ?" onClick="choixProp(this.form.choix)">


</form>
/*test.js */
function choixProp(choix)
{
for (var i = 0; i < choix.length; i++)
{ if (choix[i].checked)
{
alert("Système = " + choix[i].value)
}
}
}

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 22


L'accès aux éléments de type SELECT

Propriété Description
name Indique le nom de la liste déroulante.
length Indique le nombre d'éléments de la liste. S'il est indiqué dans le tag <select>,
tous les éléments de la liste seront affichés. Si vous ne l'indiquez pas un seul
apparaîtra dans la boite de la liste déroulante.
selectedIndex Indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par
l'utilisateur.
defaultselected Indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît alors
dans la petite boite.

Exemple 1:

<form name="form1">
<select name="list">
<option value="1">Elément 1</option>
<option value="2">Elément 2</option>
<option value="3">Elément 3</option>
</select>
<INPUT type="button"name="b" value="Quel est l'élément retenu?" onClick="liste(form1)">
</form>
/* test.js*/
function liste(form1)
{ alert("L\'élément " + (form1.list.selectedIndex + 1)); }

Exemple 2:

Entrez votre choix :


<form name="form1">
<select name="liste" size=1>
<option value="valeur ligne 1">Libellé ligne 1</option>
<option value="valeur ligne 2">Libellé ligne 2</option>
<option value="valeur ligne 3">Libellé ligne 3</option>
<option value="valeur ligne 4">Libellé ligne 4</option>
</select>
<input type="button"name="b" value="Quel est l'élément retenu?" onClick="Liste()">
</form>
/*test.js*/

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 23


function Liste()
{
//Pour récupérer l'indice la ligne sélectionnée :
var i=document.form1.elements['liste'].selectedIndex;
console.log("i=",i);
//Pour récupérer le nombre de lignes :
var nbLigne= document.form1.elements['liste'].options.length;
console.log("nbLigne=",nbLigne);
//Pour récupérer la valeur de la ligne sélectionnée :
var val=document.form1.elements['liste'].options[document.form1.elements['liste'].selectedIndex].value;
console.log("la valeur de la ligne sélectionnée =",val);
}

Manipuler l’objet Textaera : saisie de texte multiligne

L'objet textarea est une zone de texte de plusieurs lignes. La syntaxe Html est :
<form>
<textarea name="nom" rows=x cols=y>texte par défaut</textarea>
</form>

Où rows=x représente le nombre de lignes et cols=y représente le nombre de colonnes affichées


et non pas la taille du texte !.
L'objet textarea possède plusieurs propriétés :

Propriété Description
name Indique le nom du contrôle par lequel on pourra accéder.
defaultvalue Indique la valeur par défaut qui sera affichée dans la zone de texte.
value Indique la valeur en cours de la zone de texte. Soit celle tapée par l'utilisateur ou
si celui-ci n'a rien tapé, la valeur par défaut.

NB : En Javascript, on utilisera \n pour passer à la ligne.


Afficher le contenu par javascript :

function afficherarea(form1)
{
var testarea =document.form1.txta.value;
alert(testarea);
}

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 24


Modifier le contenu par javascript :
<form name="form1">
<textarea name="txta" rows=x cols=y onclick="modifierarea()">texte par défaut</textarea>
</form>
/*test.js*/
function modifierarea()
{
document.form1.txta.value= "ligne1\r\nligne2\r\nligne3";
}

Manipuler l’objet reset

Le contrôle reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer
les valeurs par défaut.
La syntaxe Html est :
<form name="form1">
Nom : <input type="text"><br>
<input type="reset" name="nom" value= "Annuler">
</form>
où value donne le texte du bouton.
Une seule méthode est associée au contrôle reset, c'est la méthode onClick(). Ce qui peut servir, par
exemple, pour faire afficher une autre valeur que celle par défaut.

Manipuler l’objet submit

Le contrôle submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire
à l'URL désignée dans l'attribut action du tag <form>.
la syntaxe Html est :
<form name="form1">
Nom : <input type="text"><br>
<input type="submit" name="nom" value="Envoyer">
<input type="reset" name="nom" value= "Annuler">
</form>
Une seule méthode est associée au contrôle submit, c'est la méthode onClick().
On va déclencher les contrôles de formulaire sur l’événement Click du bouton submit en appelant une
fonction de contrôle.

forms.action

Info
La propriété javascript action de l'objet document.forms permet de connaître ou de modifier la valeur de
l'attribut HTML action de la balise HTML form.
<body >
<form name="dmc" action="aliasdmc.php">
<input type="text" value="DMC" name="nom">
</form>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 25


<script src="at1.js"></script>
</body>
La propriété javascript action de l'objet document.forms accepte comme valeur :
- url relative ou absolue.
document.forms.dmc.action="dmc.php";
La propriété javascript action de l'objet document.forms renvoie comme valeur :
- valeur de type String.
alert(document.forms.dmc.action);//dmc.php
forms.target

Info
La propriété javascript target de l'objet document.forms permet de connaître ou de modifier la valeur de
l'attribut HTML target de la balise HTML form.
<body >
<<form name="dmc" target="dmc">
</form>
<script src="at1.js"></script>
</body>
La propriété javascript target de l'objet document.forms accepte comme valeur :
- valeur de type String.
document.forms.dmc.target="_blank";
La propriété javascript target de l'objet document.forms renvoie comme valeur :
- valeur de type String.
alert(document.forms.dmc.target);
Formulaire text

Info
Nous allons étudier les propriétés Javascript de la balise HTML <input type="text">.
La balise HTML text est un champ texte d'une seule ligne.

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :


- l'objet javascript input du Document Object Model HTML (DOM HTML)
- la balise HTML input
- les feuilles de style CSS

input type=text
<body >
<<form name="dmc" target="dmc">
<input type="text" name="nom" value="dmc">
</form>
<script src="at1.js"></script>
</body>
Changer la value

Vous pouvez changer la value de l'attribut HTML "value" de la balise HTML input.
<form name="f">
<input type="text" name="dmc">

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 26


<a href="#" onMouseOver = "document.forms.f.dmc.value = 'cmd'" onMouseOut = "document.forms.f.dmc.value =
'dmc'">Change</a>
</form>
<script src="at1.js"></script>
</body>

Bloquer le champ
Vous pouvez bloquer l'écriture dans la balise HTML input.

Par exemple :

dmc

<body >
<form name="f">
<input type="text" name="dmc" onfocus = "document.forms.f.dmc.blur()">
<br>essayez d'écrire dans le champ.</form>
<script src="at1.js"></script>
</body>

Récupérer la valeur
Vous pouvez récupérer la valeur de la balise HTML input.
Par exemple tapez un mot dans la première case :

Code :

<body >
<form name="f">
<input type="text" name="dmc" value="dmc"><input type="text" name="cmd" value="">
<a href="javascript:void(0)" onClick = "document.forms.f.cmd.value = document.forms.f.dmc.value">Cliquez pour
transferer</a>
</form>
<script src="at1.js"></script>
</body>

Les événements
onBlur : Quand on perd le focus de la balise HTML Input.
onChange : Quand on fait un changement dans la balise HTML Input (interprétée suivant le navigateur).
onFocus : Quand prend le focus de la balise HTML Input.
onSelect : Quand on sélectionne du texte dans la balise HTML Input (interprétée suivant le navigateur).
<input type="text" name="cmd" value="" onfocus="action()">

Les méthodes

blur() : Enlève le focus de la balise HTML.


focus() : Met le focus de la balise HTML.
select() : Sélectionne le contenu de la balise HTML.
handleEvent() : Gestion des événements.
document.forms.formulaire.champtext.select();

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 27


Test nombre

Info
Imaginez que votre champ ne doit contenir que de chiffre (code postal).

Code :

<form name="e">
<input type="text" name="dmc" size="8">
<input type="button" name="bout" value="Tester" onClick="test()">
</form>
<script >
function test() {
var m=parseFloat(document.forms.e.dmc.value);
if (isNaN(m))
alert("C'est pas un chiffre.");
else
alert("C'est pas un chiffre.");

}
</script>
Test Mail

Info
Tester la validité d'un Email.

Code :

<form name="e">

Email :<input type="text" name="dmc" size="8">


<input type="button" name="bout" value="Tester" onClick="test()">

</form>

<script >
var inp= document.forms.ee.dmc ;
function test()
{
if ( (inp.value !="") && (inp.value.indexOf("@") !="-1") && (inp.value.indexOf(".") !="-1"))
{
alert("Email semble valide");
}else {
alert("Email semble invalide");
}
}
</script>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 28


Formulaire textarea

Info
Dans ce cours de javascript, nous allons étudier les propriétés Javascript de la balise HTML et XHTML
<textarea>.
La balise HTML et XHTML textarea est champ texte multiligne.
La balise textarea HTML et XHTML fonctionne de la même façon que <input type="text">

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :


- l'objet javascript TextArea du Document Object Model HTML (DOM HTML)
- la balise HTML textarea.
- les feuilles de style CSS
<form name="e">
<textarea name="nom" value="dmc"></textarea>
</form>

Changer la valeur
Vous pouvez changer la valeur du contenu de la balise HTML:

Par exemple :

dmc

Passez la souris sur le lien

<form name="f">
<textarea name="dmc"></textarea>
<a href="#" onMouseOver = "document.forms.f.dmc.value='cmd'" onMouseOut = "document.forms.f.dmc.value =
'dmc'">Change</a>
</form>

Bloquer le champ
Vous pouvez bloquer la saisie dans la balise HTML et XHTML Texarea:

dmc

<form name="f"><textarea name="dmc" onfocus = "document.forms.f.dmc.blur()"></textarea>


</form>
Vous pouvez récupérer la valeur du champ :
Taper un mot dans la première case :

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 29


dmc

Cliquez moi pour changer

<form name="fff">
<textarea name="dmc">dmc</textarea>
<textarea name="cmd"></textarea>
<a href="javascript:void(0)" onClick = "document.forms.fff.cmd.value = document.forms.fff.dmc.value">Changer</a>
</form>
Les événements

onBlur Quand on perd le focus de la balise HTML textarea.


onChange Quand on fait un changement dans la balise HTML textarea (interprétée suivant le navigateur).
onFocus Quand on prend le focus de la balise HTML textarea.
onSelect Quand on sélectionne du texte dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyDow Quand on presse une touche dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyPress Quand une touche est pressée dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyUp Quand on lâche une touche dans la balise HTML textarea (interprétée suivant le navigateur).
<form name="fff">
<textarea name="dmc" onfocus = "Action()"></textarea>
</form>
Les méthodes

blur() Enlève le focus de la balise HTML textarea.


focus() Met le focus dans la balise HTML textarea.
select() Sélectionne le contenu de la balise HTML textarea.
handleEvent() Gestion des événements.
document.forms.formulaire.textarea.blur();

Formulaire radio

Info
Dans ce cours javascript, nous allons étudier les propriétés javascript de la balise HTML <input
type="radio">
La balise HTML et XHTML radio va vous permettre de proposer un ensemble de choix avec une seule
possibilité de sélection.

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :


- l'objet javascript Input du Document Object Model HTML (DOM HTML),
- la balise HTML input
- les feuilles de style CSS

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 30


input type=radio

Changer la valeur
<form name="rd">
<input type="radio" name="radio" value="radio">
</form>
Vous pouvez changer la valeur de l'attribut HTML "value" du bouton radio HTML.

Cliquer pour connaître la valeur initiale Cliquez pour changer

<form name="r">
<input type="radio" name="dmc" value="radio">
<input type="radio" name="dmc" value="autre">
<a href = "javascript:alert(document.forms.r.dmc[0].value);"> valeur initiale </a>
<a href = "document.forms.r.dmc[0].value = 'cmd'; alert(document.forms.r.dmc[0].value)"> Change </a>
</form>

Sélectionner
Vous pouvez sélectionner le bouton Radio HTML .

Change

<form name="r">
<input type="checkbox" name="dmc">
<a href="#" onMouseOver = "document.forms.c.dmc.checked = true" onMouseOut = "document.forms.c.dmc.checked =
false">Change</a>
</form>

Les événements

onBlur Quand on perd le focus d'un bouton Radio HTML.


onClick Quand clique sur un bouton Radio HTML.
onFocus Quand on prend le focus sur un bouton Radio HTML.
<form name="r">
<input type="checkbox" name="dmc" onclick="action()">= false">
</form>

Les méthodes

blur() Enlève le focus d'un bouton Radio HTML.


focus() Met le focus sur un bouton Radio HTML.
click() Simule le clique sur un bouton Radio HTML.
handleEvent() Gestion des événements.

Exemple

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 31


<form name="ee">

Choix 1 <input type="radio" name="dmc" value="radio">


Choix 2 <input type="radio" name="dmc" value="radio">
Choix 3 <input type="radio" name="dmc" value="radio">
Choix 4 <input type="radio" name="dmc" value="radio">
Choix 5 <input type="radio" name="dmc" value="radio">
Choix 6 <input type="radio" name="dmc" value="radio">

<input type="button" name="bout" value="Tester" onClick="teste()">

</form>
//at1.js
function teste() {
var m=0;
for (i=0;i<6;i++) {
if (document.forms.ee.dmc[i].checked==true) {
m=i;
alert("C'est le choix "+Number(i+1)+" qui est sélectionné");
break;
}
}
}

Formulaire checkbox

Info
Nous allons étudier les propriétés Javascript de la balise HTML <input type="checkbox">.
La balise HTML checkbox est une case que l'on peut cocher ou décocher.

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :


- L'objet javascript Input du Document Object Model HTML (DOM HTML)
- la balise HTML input
- les feuilles de style CSS

input type=checkbox

Changer la valeur
<form name="ee">
<input type="checkbox" name="checkbox" value="checkbox">
</form>
Vous pouvez changer la valeur de l'attribut HTML "value" de la case à cocher Chekbox.

Par exemple :

Cliquez pour connaître la valeur initiale


cliquez pour changer

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 32


<form name="c">
<input type="checkbox" name="dmc" value="checkbox">
<a href = "alert(document.forms.c.dmc.value);"> valeur initiale</a>
<a href="document.forms.c.dmc.value='cmd'; alert(document.forms.c.dmc.value)"> Change</a>
</form>

Sélectionner
Vous pouvez sélectionner un case à cocher Chekbox.
Par exemple :

Passez la souris sur ce lien

<form name="c">
<input type="checkbox" name="dmc">
<a href="#" onMouseOver = "document.forms.c.dmc.checked= true" onMouseOut = "document.forms.c.dmc.checked =
false">Change</a>
</form>

Les événements

onBlur Quand on perd le focus de la case à cocher Chekbox.


onClick Quand on clique sur la case à cocher Chekbox.
onFocus Quand on prend le focus sur la case à cocher Chekbox.
<form name="c">
<input type="checkbox" name="dmc" onclick="action()">
</form>

Les méthodes

blur() Enlève le focus sur la case à cocher Chekboxfocus() Met le focus sur la case à cocher Chekbox
click() Simule un clique sur la case à cocher Chekbox
handleEvent() Gestion des événements.
document.forms.formulaire.checkbox.click();

Exemple

< form name="e">


Choix 1 <input type="checkbox" name="checkbox1" value="checkbox">
Choix 2 <input type="checkbox" name="checkbox2" value="checkbox">
Choix 3 <input type="checkbox" name="checkbox3" value="checkbox">
Choix 4 <input type="checkbox" name="checkbox4" value="checkbox">
Choix 5 <input type="checkbox" name="checkbox5" value="checkbox">
Choix 6 <input type="checkbox"> name="checkbox6" value="checkbox">
<input type="button" name="bout" value="Tester" onClick="test()">
</form>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 33


//at1.js
function test() {
var m=0;
for (i=1;i<7;i++) {
if (eval("document.forms.e.checkbox"+i+".checked == true")){
m=m+1;
}
}
if (m>=3) {
alert("Vous avez fait 3 choix ou plus");
}else {
alert("Vous devez cocher 3 choix ou plus");
}
}

Formulaire select

Info

Dans ce cours javascript, nous allons étudier les propriétés Javascript de la balise HTML <SELECT>.
La balise HTML select va vous permettre de créer une liste déroulante à sélection unique, soit à sélection
multiple.

select Choix unique

< form name="s">


<select name="nom">
<option></option>
<option></option>
</select>
</form>

Changer la value
Vous pouvez changer connaître ou modifier la value de l'attribut HTML "value" d'une option :

<form name="f">
<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
<option value="Choix 2"> Choix 2 </option>
<option value="Choix 3"> Choix 3 </option>
</select>
<a href="#" onClick=" alert(document.forms.f.dmc.options[2].value) ">Avant</a>
<a href="#" onClick="document.forms.f.dmc.options[2].value ='cmd'; alert(document.forms.f.dmc.options[2].value)">Après</a>
</form>
Idem pour menus aux choix multiples.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 34


Option sélectionnée

Vous pouvez trouver l'index l'option sélectionnée :

<form name="f">
<select name="dmc">
option value="Choix 1" selected> Choix 1 </option>
option value="Choix 2"> Choix 2 </option>
option value="Choix 3"> Choix 3 </option>
</select>
<a href="#" onClick = "alert('Choix '+(( document.forms.ff.dmc. options.selectedIndex) + 1) );"> Voir l'option sélectionnée. </a>
</form>

Ajouter

Vous pouvez ajouter une option :


Par exemple, visualisez le menu avant de cliquer:

<form name="f">
<select name="dmc">
option value="Choix 1" selected>Choix 1</option>
option value="Choix 2">Choix 2</option>
option value="Choix 3">Choix 3</option>
</select>
<a href="#" onClick=ajoute();">Voir l'option selectionnée.</a>
</form>
//at1.js
function ajoute(){
document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}

Supprimer

Vous pouvez supprimer le contenu d'une option :


Par exemple, visualisez le menu avant de cliquer:

<form name="f">
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
</select>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 35


<a href="#" onClick=ajoute();"> Voir l'option sélectionnée.</a>
</form>
//at1.js
function ajoute(){
document.forms.fff.dmc.options[1]=new Option(' ',' ');
// ou
//document.forms.fff.dmc.options[1]=null;
}

Vous pouvez supprimer définitivement une option :


Par exemple, visualisez le menu avant de cliquer :

<form name="f">
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select>
<a href="#" onClick=ajouteSup();">Supprimer l'option du menu.</a>
</form>
//at1.js
function ajouteSup(){
n=1; // index de l'option a supprimer
for (i = n; i < Number(document.forms.f.dmc.options.length-1); i++){
document.forms.ff.dmc.options[i] = new Option((document.forms.f.dmc.options[ Number(i+1) ].text
),(document.forms.f.dmc.options[ Number(i+1) ].value) );
}
document.forms.ff.dmc.options.length--;
}

Idem pour menus aux choix multiples.

Les événements

onBlur Quand on perd le focus de l'objet formulaire Select.


onChange Quand on fait un changement d'option dans l'objet formulaire Select.
onFocus Quand on prend le focus de l'objet formulaire Select.
<form name="f">
<select name="dmc" onchange="action()">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
</select>
<a href="#" onClick=ajouteSup();">Supprimer l'option du menu.</a>
</form>

Les méthodes

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 36


blur(), Enlève le focus de l'objet formulaire Select.
focus() Met le focus de l'objet formulaire Select
handleEvent() Gestion des événements.
document.forms.formulaire.select.blur();

select Choix multiple

<form name="f">
<select name="nom" multiple >
<option></option>
<option></option>
</select>
</form>

Récupérer les options séléctionnées

Vous pouvez récupérer les options sélectionnées :


Par exemple, sélectionnez plusieurs options :

<form name="f" multiple size="5>


<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select>
<a href="#" onClick=evaluation();">Evaluer.</a>
</form>
//at1.js
function evaluation(){
var selectione="";
var Num=0;
for (i=0; i<document.forms.f.dmc.options.length; i++) {
if (document.forms.f.dmc. options[i].selected ) {
Num=Number(Num+1);
selectione = selectione+"; "+document.forms.f.dmc.options[i].text;
}
}
alert(Num+" choix : "+selectione);
}

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 37


Ajouter

Vous pouvez ajouter une option :


Par exemple, visualisez le menu avant de cliquer:

<form name="f" multiple size="5>


<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
<option value="Choix 2"> Choix 2 </option>
<option value="Choix 3"> Choix 3 </option>
<option value="Choix 4"> Choix 4 </option>
<option value="Choix 5"> Choix 5 </option>
</select>
<a href="#" onClick=ajoute ();">Ajouter une option.</a>
</form>
//at1.js
function ajoute(){
document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}

La vraie écriture de new Option est :


new Option('dmc', 'cmd', defaultSelect, select);

defaultSelect et select prennent la valeur de true ou false.


Chez moi, Internet Explorer me fait une grosse erreur "action non conforme" et se ferme. Alors bien tester
avant d'utilisé cette forme.

Formulaire button

Info

Nous allons étudier les propriétés Javascript de la balise HTML :


<input type="reset">, qui permet de réinitialiser le formulaire HTML.
<input type="submit">, qui permet d'envoyer le formulaire HTML.
<input type="image">, qui permet d'envoyer le formulaire HTML mais à la place du bouton on spécifie une
image.
<input type="button"> qui permet d'afficher un bouton de formulaire n'a aucune action.

reset()

Info

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 38


<form name="f" >
<input type="reset">
</form>

Pour remettre à jour un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input
type="reset"> mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode reset().
<form name="f" >
<input type="button" onClick="document.forms.f.reset()">
</form>

<form name="f">
<input type="text" name="textfield">
<input type="button" onClick="document.forms.f.reset()">
</form>

submit()

Info

<form name="f">
<input type="submit">
</form>

Pour envoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="submit">
mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode submit().
<form name="f">
<input type="button" onClick="document.forms.f.submit()">
</form>

<form name="f">
<input type="text" name="champ">
<input type="button" onClick="document.forms.f.submit()">
</form>

image

Info
ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 39
<form name="f">
<input type="image">
</form>
Pour renvoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="image">
mais une image avec un lien <a href="#">.
A ce dernier, nous lui associerons un événement, généralement un "onclick" avec la methode submit().

<a href="#" onClick = "document.forms.f.submit()"> <img src="monimage.gif"> </a>

<form name="f">
<input type="text" name="champ">
</form>

<a href="#" onClick="document.forms.f.submit()"><img src="monimage.gif"></a>

L'image avec le lien peut être dans ou en dehors du formulaire.


Vous pouvez aussi mettre une image pour la méthode reset(), voiçi une autre manière d'écrire :
<form name="f">
<input type="text" name="champ">
</form>

<a href = "javascript:document.forms.f.reset()"> <img src="monimage.gif"> </a>


Exemple Complet :
Réalisons un formulaire comme suit et faisons le code javascript contrôlant ses différents contrôles.

Le code html – css et javascript:

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 40


<h1>Formulaire</h1>
<form name="formulaire" action="traitement.php" method="get" onsubmit=" return valider_Formulaire(this)">
<table>
<tr><td><label for="nom"> Nom: </label></td><td><input type="text" size="40" name="nom" id="nom"/> </td></tr>
<tr><td><label for="lieu">Résidence: </label></td><td><input type="text" size="40" name="lieu" id="lieu"/></td></tr>
<tr><td><label for="courrier">Mail: </label></td><td><input type="text" size="40" name="courrier"
id="courrier"/></td></tr>
<tr><td><label for="age">Âge: </label></td><td> <input type="text" size="40" name="age" id="age"/></td></tr>

<tr><td><label>sexe :</label></td><td>
<input type="radio" id="sexeM" name="sexe" value="M"/><label for="sexeM">M</label>
<input type="radio" id="sexeF" name="sexe" value="F"/><label for="sexeF">F</label></td></tr>

<tr><td><label>Langue Parlée:</label></td><td>
<input type="checkbox" id="fr" name="lp" value="fr"/><label for="fr">FR</label>
<input type="checkbox" id="ar" name="lp" value="ar"/><label for="ar">AR</label>
<input type="checkbox" id="eng" name="lp" value="eng"/><label for="eng">ENG</label>
</td> </tr>

<tr> <td><label for="profession">Profession: </label></td>


<td><select id="profession" name="profession">
<option>Selectionner une option</option>
<option value="M">Menuisiser</option>
<option value="F">Forgeron</option>
<option value="T">Technicien</option>
<option value="S">Secrétaire</option>
</select></td></tr>
<tr><td>Formulaire:</td>
<td><input type="submit" value="Envoyer"/><input type="reset" value="Annuler"/></td></tr>
</table>
</form>
/* texp.js */
function valider_Formulaire(frm)
{ //-1 : Le nom doit etre non vide
var strNom=frm.nom.value.toUpperCase();
if(strNom== "") {
alert("Veuillez entrer votre nom!");
frm.nom.focus();
return false;
}
//-2 : Le nom ne doit contenir ni chiffres ni caractères spéciaux!
for (var i=0;strNom.length;i++)
if (strNom.charAt(i) < "A" || strNom.charAt(i) > "Z" )
{
alert("pas de chiffres dans le nom ni de caractères spéciaux!");
frm.nom.value="";
frm.nom.focus();
return false;
}

var strLieu=frm.lieu.value;
//-3 : Le lieu de residence doit etre non vide
if(strLieu == "")
{
alert("Veuillez entrer votre lieu de résidence!");
frm.lieu.focus();
return false;
}
var strCourier=frm.courrier.value;
//-4 : L'adresse electronique doit etre non vide

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 41


if(strCourier == "") {
alert("Veuillez entrer votre adresse électronique!");
frm.courrier.focus();
return false;
}
//-5: L'adresse électronique doit contenir les deux caracteres @ et .
if(strCourier.indexOf('@') == -1 || strCourier.indexOf('.') == -1)
{
alert("Ce n'est pas une adresse électronique!");
frm.courriel.focus();
return false;
}
var strAge=frm.age.value;
//6-L'Age doit etre non vide
if(strAge == "") {
alert("Veuillez entrer votre âge!");
frm.age.focus();
return false;
}
//6-L'Age doit etre un nombre
if(isNaN(strAge))
{
alert("l'âge doit être un nombre!");
frm.age.focus();
return false;
}
//7-Un seul boutton radio doit etre coché
if ( ( frm.sexe[0].checked == false ) && ( frm.sexe[1].checked == false ) )
{
alert ( "Veuillez choisir votre sexe" );
return false;
}
//8-Au minimum Un seul boutton checkbox doit etre coché
if ( frm.lp[0].checked == false && frm.lp[1].checked == false && frm.lp[2].checked == false )
{
alert ( "Veuillez cocher vos langues parlées" );
return false;
}
//9-Au minimum il faur selectionner un element
if ( frm.profession.selectedIndex == 0 )
{
alert ( "Veuiller selectionner votre profession" );
return false;
}
return true;

}
/*exp.css*/

body
{
background-color: lightgrey;
}

FIN

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 42

Vous aimerez peut-être aussi