Envoi et réception de données selon les objets de formulaire

Les données d'un formulaire peuvent être traitées par un script contenu dans la même page, ou elles peuvent être transmises à une autre page afin que les valeurs définissent le contenu de cette page.

Dans un précédent article, on a vu comment transmettre des données d'une page HTML à une autre. Le présent article va expliquer plus en détail l'utilisation des formulaire pour transmettre des données, à une page ou un script sur le serveur.

Les données du formulaire sont utilisées dans la page, ou une autre

Dans le cas où les valeurs sont traitée par un script dans la page qui contient le formulaire (ou un fichier inclus), l'attribut action de l'objet form n'aura pas de valeur.

<form action="" >

Au bouton qui envoie les données, on associe dans ce cas un évènement onClick qui appelle la fonction JavaScript définie pour traiter les valeurs du formulaire.

<script type="text/javascript">
  function formulaire() { ... }
</script>

<input type="button" onClick="formulaire()" >

Le formulaire pourrait aussi être envoyé avec un objet image.

Pour accéder localement aux élément, on les identifie par une chaîne formée des mots document, du nom du formulaire, du nom de l'objet, et de l'attribut valeur.

Si un formulaire à pour attribut name "monform", un objet texte nommé "montext", la valeur s'obtient ainsi:

var x = document.monform.montext.value;

On assigne à l'attribut action le nom de fichier auquel envoyer les données

Lorsqu'au contraire on veut transmettre les valeurs à une autre page ou un script, on assigne le nom du fichier à l'attribut action:

<form method="GET" action="monfichier.php" >

Que le fichier soit une page HTML ou un script PHP, ou dans un autre langage, cela ne fait pas de différence quand à l'envoi, c'est la réception des valeurs qui sera différente. Cependant il reste à définir comment sont extraites les valeurs des éléments du formulaire selon le type d'objet.

Les noms des objets de formulaire et leurs valeurs sont transmis

La transmission des valeurs à une forme générale unique, mais des principes de fonctionnement qui dépendent de l'objet.

Dans la plupart des cas, les attributs name et value sont utilisés pour former une chaîne que l'on transmet en paramètre au fichier.

<input type="text" name="montexte" value="un texte">

donne la chaîne

montexte=un+texte

Les variables sont séparées par le symbole & et l'ensemble est séparé du nom de fichier par le symbole ?.

Exemple:

monfichier.php?montext=un+text&checkbox=cb1

Cette chaîne de paramètres est formée automatiquement, il suffit de d'assigner le nom de fichier à l'attribut action du formulaire.

Les cas particuliers sont:

Les zones de texte.
C'est le contenu de la balise qui constitue la valeur.
```
<input type="textarea"> Contenu </>
```
Les cases à cocher.
Le nom et la valeur sont transmises lorsque la case est cochée, on lorsque checked est ajouté à la définition et que l'utilisateur ne décoche par la case.
Sinon l'élément est ignoré, rien n'est transmis.
Les groupes boutons radios.
Les boutons radios appartenant à un groupe ont le même nom, par exemple "radio", et une valeur spécifique, comme "radio1", "radio2", etc.
Le nom "radio" est transmis avec la valeur du bouton sélectionné, ce qui forme par exemple:
```
radio=radio2
```
si c'est le second bouton qui est coché.
Les menus et listes.
Ils contiennent plusieurs balises option. C'est le contenu de la balise option sélectionnée qui forme la valeur associée au nom de la liste.
Champ image.
Quand on clique sur un champ image, cela envoie les données du formulaire. Quand à l'objet image, deux chaînes sont créés pour les valeurs x et y indiquant la position où l'on a cliqué dans l'image.
Si par exemple, le nom est "image", et que l'on clique en position x=10 et y=20, la chaîne suivante sera transmise:
```
image.x=10&image.y=20
```

La démonstration interactive permet de faire des essais sur toutes les formes de transmission de valeurs.

Cas particulier des cases à cocher

La checkbox pose un problème dans le cas où elle n'est pas cochés, si le script qui reçoit les valeurs à besoin de tous les éléments du formulaire, puisque rien n'est transmis dans ce cas . On peut contourner aisément ce problème en assignant le champs value avec l'évènement onClick.

On veut que la checkbox "cb" ait une valeur "yes" quand elle est cochée, et "no" quand elle ne l'est pas. On initialise la valeur avec ce qui correspond à l'état initial, s'il est checked, avec "yes".

<input type="checkbox" name="cb" value="yes" checked onClick="cbChange(this)" >

Une fonction met à jour la valeur quand l'état de la case à cocher change:

function cbChange(element)
{
    if(element.checked) 
      element.value="yes";
    else
      element.value="no";
}

Tout cela est détaillé dans l'article: Checkbox: Passer l'état à une autre page.

Nous allons voir maintenant comment les valeurs envoyées sont récupérées par la page qui les reçoit.

On peut récupérer les données en JavaScript ou en PHP

Les paramètres associés à l'URL d'une page sont assigné à l'attribut search de l'objet location. On peut afficher la chaîne avec le script JavaScript suivant, qui est utilisé dans notre démonstration.

function receive()
{
    var parameters = location.search;
    document.getElementById("string").innerHTML = parameters;
}

window.onload=receive;

L'identifieur "string" est l'ID d'une balise où l'on va stocker la chaîne pour l'afficher.

Pour isoler les éléments de cette chaîne de paramètre, on procède par étapes

On saute le symbole ? avec un appel à la méthode substring.
```
location.search.substring(1)
```
On découpe la chaîne en éléments selon le séparateur & et la méthode split.
```
location.search.substring(1).split("&");
```
On dissocie chaque élément en nom et valeur de la même façon.

Le script complet devient:

var parameters = location.search.substring(1).split("&");
var data = "";
for (x in parameters)
{
    var temp = parameters[x].split("=");
    thevar = unescape(temp[0]);
    thevalue = unescape(temp[1]);
    thevalue = thevalue.replace("+", " ");
    data += thevar + "=" + thevalue + "<br>";
}
document.getElementById("data").innerHTML = data;

Les éléments de la chaîne de paramètres deviennent les éléments d'un tableau indicé par x. On obtient les noms et les valeurs, Pour cet exemple, on les concatène dans la variable data afin de les afficher.

Si les données sont envoyées à un script PHP sur le serveur, ou une page contenant du code PHP, elles seront disponibles dans les variables globales $_GET ou $_POST, selon la méthode d'envoi utilisées. Ce sont des tableaux associatifs.

On récupére les données par les clés. Par exemple, on a en HTML:

<form method="POST" action="xxx.php">
<input type="text" name="login" value="xxx" />
</form>

Le code PHP sera:

$login = $_POST['login'];

On peut annuler l'envoi en assignant false à onSubmit

Il convient avant d'envoyer les données de vérifier que tous les champs utiles ont été remplis. Dans le cas ou ce n'est pas le cas, l'envoi doit être annulé.
Pour ce faire on ajoute le gestionnaire d'évènement onSubmit à la balise form:

<form method="post" action="sendmail.php" onSubmit="return test()">

La fonction de test retourne la valeur true si les données peuvent être envoyées ou false si l'envoi est annulé.

Voir aussi

GET ou POST. Quelle méthode choisir?
Les objets de formulaire et page de test.
Faire une page de login.
Comment récupérer un login et un mot de passe dans une autre page.

Lien externe

Spécification W3C pour un format JSON de données de formulaire. Faciliter le traitement JavaScript avec un format de stockage standard. On peut ainsi échanger des objets avec le serveur sans passer par POST. Mais le standard est en cours de définition.