Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

16. Mise en ligne d'un site

Formations informatiques en ligne sur YBET.be
Formations Internet Techniques
Suivre une formation Formation Internet PC et périphériques
Powerpoint Créer son propre site Dos et Windows
ACCUEIL   Nous contacter

16.9. Javascript dans des formulaires 

1. Les parties d'un formulaires - 2. Un petit calcul, une multiplication - 3. Le navigateur accepte le javascript? - 4. onsubmit, onreset - 5. Dans les zones de textes.

C'est bien le but de cette petite formation en javascript, permettre de peaufiner nos formulaires html et PHP. Prenons quelques exemples de "problèmes" dans les formulaires: accepter l'envoi uniquement si tous les champs obligatoires sont remplis, des calculs ou des modifications de champs automatiques, ... Aucun des deux premiers langages n'est réellement modifier le contenu directement d'un champ simplement. C'est ici que javascript intervient: en complément des deux premiers. Nous venons d'étudier les objets, c'est justement ces objets qui vont être utilisés dans les formulaires. Pourtant, on sait que le navigateur peut le désactiver. Faites la majorité des vos vérifications en PHP si possibles avec un formulaire auto-invocant.

<form method="POST">
<p>Nom: <input type="text" name="nom" size="30" value="Nom"></p>
<p>Votre adresse mail: <input type="text" name="mail" size="30" value="Votre adresse mail"></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>

Reprenons le petit formulaire utilisé dans le cours php sur les ... formulaires qui permettait de saisir un nom et une adresse mail avant de l'insérer dans une base de donnée. La méthode POST renvoyait vers le même fichier (on appelle cette méthode auto invocant), ce qui permettait de faire les vérifications sur la même page avant de transférer les résultats à la base de donnée.

Nous allons le modifier en plaçant les id (par facilité le même que la balise name mais ce n'est pas obligatoire) comme ceci:

<form method="POST" id="formulaire">
<p>Nom: <input type="text" name="nom" size="30" value="Nom" id="nom"></p>
<p>Votre adresse mail: <input type="text" name="mail" id="mail" size="30" value="Votre adresse mail"></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>

Pour le visiteur, l'affichage est strictement le même. Les moteurs de recherche ne tiennent pas compte des ID non plus (de toute façon, les robots ne cliquent pas sur les formulaires), même s'ils le reprennent dans le code.

En Javascript, on va déterminer cet objet de type formulaire comme

var formulaire1 =document.getElementByID("formulaire");

Pour les champs contenus dans le formulaires, deux méthodes peuvent être utilisées, soit pas numéro (on se souvient de la notation matrice du chapitre précédant) mais qui change si vous modifiez le formulaire ... soit en reprenant les deux "input" comme des sous-parties du formulaire. Par exemple, pour nom, la notation est:

var champ_nom =formulaire.nom;

// le nom du formulaire suivi de l'ID du champ nom.

Mais vous pouvez plus simplement faire quelque chose comme (ce que nous allons voire en dessous en détail) en reprenant cette fois le nom du champ repris dans le formulaire (.value spécifie que vous voulons la valeur).

document.getElementById("formulaire").elements["nom"].value

Je vous avais prévenu que travailler avec des objets pouvait sembler inutile au départ (dans la théorie) mais beaucoup plus intéressant dans les ... exercices. On y va? Mais avant de commencer la sécurisation et les fonctionnalités, on va juste reprendre quelques points théoriques.

2. Les parties d'un formulaire.

Revenons à nos formulaires en html et formulaires en php. Dans les deux cas, différentes balises sont utilisées. Nous allons toutes les revoir une à une.

<Form débute le formulaire, method désigne la méthode d'envoi (POST ou GET), action désigne le nom du fichier auquel est envoyé les données (il peut être omis pour un auto-invocant), name, le nom du formulaire

<input pour signaler une zone d'entrée, type="text" (donc toujours du texte, même si l'entrée est des chiffres) ou type ="password" qui masque les caractères entrés ou file qui nécessite une programmation spécifique vue en php, name pour le nom, size pour la largeur.

<textarea rows="2" name="S1" cols="20"></textarea>

Pas bien différente de celle de texte simple sauf que le type devient textearea, avec le nombre de lignes (row) et de colonne (la largeur, cols)

<input type="checkbox" name="C1" value="ON">
<input type="radio" value="V1" checked name="R1">
<select size="1" name="D1">
<option selected value="valeur1">valeur1</option>
<option>valeur2</option>
</select>

avec ici la valeur1 sélectionnée par défaut.

<input type="button" value="Bouton" name="B3">
<input type="submit" value="Envoyer" name="B1">

<input type="reset" value="Rétablir" name="B2">

Value reprend le texte affiché dans chaque bouton.

Chaque partie va être utilisable en Javascript mais avec des commandes propres qui vont pouvoir être ajoutées. Ceci va permettre de vérifier le contenu, mais aussi de le modifier. Ca va également permettre de faire des calculs dans les champs en fonction de ce qui est tapé dans d'autres champs et d'autoriser l'envoi uniquement dans certaines conditions.

Pour chacun de ces types de champs (certains n'acceptent pas tout), on va pouvoir vérifier 4 actions utilisateurs qui font être liés chaque fois à une commande javascript

3. Un petit calcul, une multiplication.

On va essayé un petit calcul sur trois champs. Un prix d'achat, un marche et un prix de vente. Ce qu'on veux c'est entré dans un formulaire un prix d'achat et un coefficient (exemple 1.5) et que le champ vente nous donnera effectivement le prix de vente. Sans Javascript, on va directement supprimé du formulaire le prix de vente qui sera calculé après l'envoi. Avec javascript, on va faire mieux, puisqu'on va calculer le prix de vente lorsqu'on quittera soit le champ prix, soit le champs marge mais on permettra aussi de mettre un prix de vente manuel (attention, si vous repassez sur un des deux premier champ, le prix de vente sera recalculé).

Commençons par notre formulaire.

<form method="POST" id="formulaire">
<p>Prix <input type="text" name="prix" id="prix" size="20"></p>
<p>Marge <input type="text" name="marge" id="marge" size="20"></p>
<p>Vente <input type="text" name="vente" id="vente" size="20"></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>

Prix

Marge

Vente

On a juste préparé un peu le terrain en ajoutant id="formulaire" dans la partie <form> et un id pour les trois champs (directement le contenu de name, ce qui est un peu idiot mais c'est un exercice).

Ce que nous souhaitons est une fonction qui modifie un champ lorsqu'on quitte un champ (en fait les deux premiers), on va jouer sur les règles des champs pour ajouter pour les deux premiers onblur="fonction()". Dans notre cas, le nom de la fonction est calculvente().

<p>Marge <input type="text" name="marge" id="marge" onblur="calculvente()" size="20"></p>

Il nous reste maintenant à créer la fonction en script. On va la faire étape par étape, y compris au départ mettre des fenêtres alert de vérification (c'est une méthode facile de debogage de script). Nous allons débuter avec une déclaration de variable du formulaire basées sur le "name" des champs (donc pas par l'id des champs, juste celui du formulaire inséré dans <form>

< script>
function calculvente()
{
alert("Prix d'achat " + document.getElementById("formulaire").elements["prix"].value);

var vente= document.getElementById("formulaire").elements["prix"].value * document.getElementById("formulaire").elements["marge"].value;
alert(vente);
document.getElementById("formulaire").elements["vente"].value=vente;
}
< /script>

Qu'est ce qu'on fait? Pour vérifier ce qui se passe, nous commençons par afficher une fenêtre qui nous affiche le prix d'achat (on la supprimera une fois terminée) en reprenant la valeur (value) de 'elements' prix de l'id formulaire du ... document (un peu long peut-être, nous verrons l'autre notation ensuite).

On déclare une variable vente qui est la multiplication des valeurs des éléments prix et marge. On affiche le résultat du calcul dans une fenêtre (toujours pour vérification). Et en dernier, on donne à l'élément vente la valeur de la variable script "vente". Et .... Ca fonctionne presque (le presque est inquiétant). Lorsque j'inscrit 120 dans la cas achat, j'ai bien

et un prix de vente de 0. Par contre, si j'entre comme prix d'achat 44€, là comme prix de vente:

... le NaN bien connu. La première solution est d'utiliser dans la fonction parseFloat() pour le prix d'achat et pour la marge (c'est de toute façon conseillé) mais ça ne fonctionne pas si l'utilisateur entre ... un texte. La deuxième solution, plus complète va utiliser la fonction isNaN dans une condition (qui permet de vérifier que ce qui est entré n'est pas un nombre et donc vérifier que le nombre est bien ... un nombre (souvenez-vous du point comme séparateur au lien de la virgule utilisée pour les utilisateurs anglophones mais utilisé par javascript et PHP) mais surtout de la négation avec le !. En testant sur le montant, le code script devient:

function calculvente()
{
alert("Prix d'achat " + document.getElementById("formulaire").elements["prix"].value);
var prix_achat=parseFloat(document.getElementById("formulaire").elements["prix"].value);
if (!isNaN (prix_achat))
{
var vente= document.getElementById("formulaire").elements["prix"].value * document.getElementById("formulaire").elements["marge"].value;
alert(vente);
document.getElementById("formulaire").elements["vente"].value=vente;
}else
{
alert("Vous devez entrer un chiffre, en utilisant le . comme séparateur");
}
}

On commence par transformer le prix d'achat en nombre flottant par la fonction parseFloat (ce qui supprime aussi le € de tout à l'heure. On vérifie par NOT(isNAN) que le contenu est bien un nombre. Si oui, on fait le calcul. Si non; on affiche une fenêtre pour demander un vrai nombre.

Une réelle solution passe néanmoins par le contrôle des deux champs, mais aussi d'insérer une marge par défaut (ce qui évite de la rentrer et permet aussi à l'utilisateur de voire ce qu'il doit entrer comme format).

Pour la première partie, on va simplement mettre deux lignes, une reprenant le prix d'achat et une pour la marge mais aussi de vérifier les deux conditions d'une seule fois.

function calculvente()
{
alert("Prix d'achat " + document.getElementById("formulaire").elements["prix"].value);
var prix_achat=parseFloat(document.getElementById("formulaire").elements["prix"].value);
var marge=parseFloat(document.getElementById("formulaire").elements["marge"].value);
alert(prix_achat);
if (!isNaN (prix_achat)&& !isNaN(marge))
{
var vente= document.getElementById("formulaire").elements["prix"].value * document.getElementById("formulaire").elements["marge"].value;
alert(vente);
document.getElementById("formulaire").elements["vente"].value=vente;
}else
{
alert("Vous devez entrer un chiffre, en utilisant le . comme séparateur");
}

}

Pourtant ... lorsqu'on débute un nouveau formulaire (une nouvelle fiche produit), on entre le prix mais sans définir de marge et ... comme elle n'est pas définie, on se retrouve avec une fenêtre d'erreur. En pratique, sans les fenêtres de vérification, pas de problèmes mais ... sauf si l'utilisateur ne met pas de marges (le prix de vente est à zéro quand même). La solution, passe par donner une valeur par défaut à la case marge via l'html en lui donnant un attribut value="1" par exemple. Au total, le code complet devient

<form method="POST" id="formulaire">
<p>Prix <input type="text" name="prix" size="20" onblur="calculvente()"></p>
<p>Marge <input type="text" name="marge" value="1" size="20" onblur="calculvente()"></p>
<p>Vente <input type="text" name="vente" size="20"></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>

< script>
function calculvente()
{
var prix_achat=parseFloat(document.getElementById("formulaire").elements["prix"].value);
var marge=parseFloat(document.getElementById("formulaire").elements["marge"].value);
if (!isNaN (prix_achat)&& !isNaN(marge))
{
var vente= document.getElementById("formulaire").elements["prix"].value * document.getElementById("formulaire").elements["marge"].value;
alert(vente);
document.getElementById("formulaire").elements["vente"].value=vente;
}else
{
alert("Vous devez entrer un chiffre, en utilisant le . comme séparateur");
}
}
< /script>

Nous avons aussi ici supprimer les id dans les champs puisque nous sélectionnons les champs par leur nom mais aussi nos fenêtres de vérifications qui ne sont plus nécessaires. Et voilà notre calcul automatique sur trois champs numériques.

3. Le navigateur du visiteur accepte le javascript?

Le but comme webmaster est de se faciliter la vie et quel webmaster n'a jamais reçu à partir d'un formulaire des mails automatiques bourrés de liens plus (surtout moins) intéressants. Ces mails sont envoyés en automatique à partir d'un site.

La première opération est de récupérer une page avec un formulaire, de reprendre le code complet avec un petit programme php et de récupérer toutes les parties à remplir (y compris les listes de choix), puis de renvoyer automatiquement une valeur plus ou moins plausible pour tous ces champs (sans oublier bien sûr de repérer un champ de type textearea pour caser les liens sous toutes les formes de codages possibles).

Pourtant, ces robots programmés ont deux défauts: ils n'acceptent pas les cookies et ... le Javascript (une autre méthode de sécurisation utilise htaccess pour vérifier si l'utilisateur vient bien du site mais est plus risquée dans certains cas)

Comment on détermine si le navigateur accepte le javascript? On va simplement s'il existe (ou non un id).

if (!document.getElementById)
{
alert('Le navigateur n\'accepte pas le javasript');
}

4. onSubmit, onReset

Un formulaire standard html reprend le plus souvent deux boutons de type submit (envoyer) et reset (retablir). Ces deux boutons sont liés à deux commande en javascript: onSubmit et onReset. Ils vont nous permettre d'exécuter une fonction lorsqu'on clique sur le bouton Envoi du formulaire et celui de rétablissement des données.

<input type="submit" value="Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2">

Elles fonctionne comme les propriétés de souris que nous avons vu précédemment, donc sans les balises script (la déclaration des fonctions liées à ces deux commandes oui). Schématiquement, le code est:

<form method="post" onsubmit="return correct(this);">
<!-- ici, le contenu du formulaire -->
<input type="submit" value="Envoyer" />
</form>

 La fonction correct va retourner true (le formulaire est bien envoyé) ou false (le formulaire n'est pas correct et pas envoyer). La méthode est identique pour onReset.

5. Les zones de texte et texte déroulante

 Comme ce sont les zones les plus souvent utilisées, on va débuter par celle-ci et voire ce que l'on peut faire avec Javascript (et ne pas pouvoir faire en html). Quelques exemples d'utilisation? Vérifier si un champ est rempli, si c'est bien un nombre qui est introduit, ville en fonction du code postal, vérifier si l'âge est inclus entre deux valeurs ... et plus encore.

On va reprendre notre simple formulaire de départ. Il ne demande que le nom avec l'appel d'une fonction correction() lorsqu'on quitte le champ:

<form method="POST" id="formulaire">
<p>Nom: <input type="text" name="nom" size="30"  onblur="correction()></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>

5.1. Conversion majuscule - minuscule

Dans les variables et fonctions, nous avons vu les propriétés des chaînes qui renvoient ces valeurs. On va juste les adapter.

<form method="POST" id="formulaire">
<p>Nom: <input type="text" name="nom" size="30" onblur="correction()"></p>
<p><input type="submit" value="Envoyer" name="B1"></p>
</form>
function correction()
{
var texte =document.getElementById("formulaire").elements["nom"].value;
texte=texte.substring(0,1).toUpperCase()+texte.substring(1).toLowerCase();
document.getElementById("formulaire").elements["nom"].value=texte;
}

Dans le formulaire html, en quittant le champ nom, on appelle la fonction correction. Elle va juste créer une variable locale qui va mettre le premier caractère en minuscule et tout le reste de la chaîne en majuscule.

Autres formations en ligne:

<5. Objets