Envoyé par
Samy-DT
Bonjour,
Je débute dans le web et le javascript.
Salut à toi ! tu as frappé à la bonne porte. Comme tu le vois, tu as déjà plusieurs réponses, et j'apporte mes 5 centimes à mon tour.
- comment alimenter les variables de mon calcul javascript avec les valeurs saisies dans les formulaires ?
Pour un traitement par JavaScript uniquement, je te suggère d'utiliser les id. Tu les connais peut-être déjà, ce sont des attributs html, par exemple :
<input id="mon-joli-input" ... >
Ils te permettent d'accéder à l'élément HTML depuis ton script en appelant getElementById :
var $monJoliInput = document.getElementById("mon-joli-input");
(Le dollar c'est juste une convention que j'utilise pour indiquer que la variable est un élément HTML.)
Tu accèdes alors à la valeur saisie via la propriété value. Note que les valeurs sont toujours des chaînes, il faut donc prendre un minimum de précautions si le type souhaité est un nombre. Par exemple :
1
2
3
4
| var $montant = document.getElementById("montant");
var montantChaine = $montant.value;
var montant = parseInt(montantChaine, 10);
// le 10 signifie base décimale, on ne veut pas que le montant soit interprété en octal par accident |
Tu remarqueras une différence importante entre mon exemple et celui de Iakou : lui utilise les attributs name, moi les id. Ce qui change, c'est que les attributs name sont prévus pour fonctionner sans JavaScript. Il s'agit du mécanisme de base des formulaires : tout input ayant un name envoie sa valeur lorsque le formulaire est soumis. Par exemple, si on a les inputs suivants :
1
2
| <input name="quantite" value="35" />
<input name="total" value="100" /> |
Les données envoyées seront : quantite=35&total=100. Si ton formulaire utilise la méthode GET, tu les verras dans l'URL. (Pour POST, utilise Firebug ou toute autre console – appuie sur F12 et il y a de fortes chances que ton navigateur ouvre sa console.)
JavaScript permet d'accéder aux éléments ayant un name au moyen de document.forms. C'est la technique qu'Iakou a utilisée. Les id permettent un accès plus direct aux éléments, et rendent généralement le code moins « confus ». Bien entendu, rien ne t'empêche de coupler les deux :
<input id="montant" name="montant" ... >
C'est une pratique courante. Le name assure le traitement côté serveur alors que l'id assure le traitement par JavaScript.
Attention à ne pas te laisser tenter de faire tous les traitements côté client ! Comme Iakou l'a dit, il faut faire les calculs des deux côtés. D'une part, côté serveur, parce que tu ne peux pas faire confiance à ce qui provient du client (une simple console permet à n'importe qui de modifier ton script et de lui faire envoyer des valeurs trafiquées). C'est indispensable pour la sécurité de ton application. Dautre part, côté client, parce que ça permet à l'utilisateur d'avoir un retour immédiat (sans requête envoyée au serveur) sur la validité des données qu'il a saisies. En bref : côté serveur = sécurité, côté client = ergonomie.
Une nuance toutefois : si ton calcul n'est qu'une étape dans un processus plus long que tu ne valides qu'à la fin, ou si tout simplement tu as décidé de faire une application entièrement côté client, tu n'auras évidemment pas besoin de faire valider les données par le serveur.
Pour mettre en œuvre ton script de validation, regarde à nouveau le code donné par Iakou : il utilise un évènement onsubmit et appelle une fonction qu'il a nommée verif. Lorsque l'utilisateur clique sur le bouton submit, la fonction est appelée avant que les données soient envoyées au serveur. Si la fonction renvoie false, l'envoi est annulé.
- comment passer les résultats des calculs à la seconde page html et les stocker dans des tableaux et dans d'autres formulaires ?
Pour rester simple je vais supposer que tu as choisi de passer par le serveur. Arrivé ici, tu sais qu'il s'est produit plusieurs choses :
- L'utilisateur a saisi ses données puis cliqué sur le bouton submit
- JavaScript a validé les données et l'envoi du formulaire n'a pas été empêché
- les données ont été envoyées au serveur
C'est donc sur le serveur que nous devons agir à présent. Premièrement, il faut récupérer les données et les vérifier. Les données du formulaire sont exposées par le tableau $_GET ou $_POST selon la méthode du formulaire (je vais supposer que c'est POST pour la suite). La vérification la plus basique consiste à s'assurer que chaque donnée a le type attendu, par exemple :
1
2
3
4
5
6
| if (isset($_POST['montant'])) {
$montant = (int) $_POST['montant'] || 0;
// le bout de code « || 0 » indique de prendre la valeur 0 si la conversion en nombre échoue
} else {
$montant = 0;
} |
Le bon réflexe est de ne jamais utiliser directement les valeurs de $_POST dans le code mais toujours utiliser des variables intermédiaires qui auront été nettoyées, comme la variable $montant dans mon exemple.
Pour afficher les valeurs dans un tableau, il faut que ton script PHP génère le code HTML dynamiquement, avec des echo et des variables. Par exemple :
1
2
3
4
5
6
7
8
| <table>
<tbody>
<tr>
<th scope='row'>Montant</th>
<td><?php echo $montant; ?></td>
</tr>
</tbody>
</table> |
Ou bien :
1
2
3
4
5
6
7
8
9
10
| <?php
echo "<table>
<tbody>
<tr>
<th scope='row'>Montant</th>
<td>$montant</td>
</tr>
</tbody>
</table>";
?> |
Ces deux exemples produisent le même code HTML.
Attention à la différence entre guillemets simples et doubles en PHP.
Tu peux aussi générer du code JavaScript dynamiquement, mais je te le déconseille car c'est très facile de se mélanger les pinceaux !
- le javascript seul suffit-il pour faire tout ça ou ai-je besoin de php ?
Tout dépend de la sensibilité que tu accordes aux données. Si tu dois maintenir une base de données, un serveur sera indispensable pour les raisons de sécurité que Iakou et moi avons expliquées. Si ton application est simplement un utilitaire de calcul ou d'information, tu peux reposer sur du JavaScript pur. Dans ce cas-là, tu devras annuler systématiquement le submit du formulaire, et utiliser par exemple window.open pour ouvrir la 2e page. Je m'attarde un peu sur ce point :
1
2
3
| var childWindow = window.open("page2.html");
var $inputPage2 = childWindow.document.getElementById("super-input"); |
Le truc important à retenir c'est que tous les objets JavaScript à utiliser dans la fenêtre créée doivent êtrent appelés à partir de childWindow.
Pour manipuler du HTML depuis un script, une méthode pratique est innerHTML.
La manipulation plus « fine » du HTML repose sur la création manuelle d'éléments avec createElement, ainsi que leur insertion/déplacement avec appendChild et insertBefore.
En guise de conclusion, je te donne ce conseil : mets le Mozilla Developer Network (MDN) dans tes marque-page, c'est souvent une source de qualité, même s'il n'y a pas toujours une version française pour chaque article.
Calculs basés sur des formulaires et transfert des résultats
Répondre avec citation
...mais dis moi cela ne fait pas chère la ligne 
Partager