Calculs basés sur des formulaires et transfert des résultats

Version imprimable

13/06/2014, 16h31
Samy-DT

Calculs basés sur des formulaires et transfert des résultats

Bonjour,

Je débute dans le web et le javascript.

Je dois faire une application qui fait des calculs à partir de valeurs saisies dans un formulaire (HTML), et qui renvoie les résultats dans une autre page HTML.

J'ai fait d'un côté ma mise en page HTML/CSS, et de l'autre mon calcul en javascript. Les questions que je me pose maintenant sont :

- comment alimenter les variables de mon calcul javascript avec les valeurs saisies dans les formulaires ?

- comment passer les résultats des calculs à la seconde page html et les stocker dans des tableaux et dans d'autres formulaires ?

- le javascript seul suffit-il pour faire tout ça ou ai-je besoin de php ?

Ce sont des vastes questions, mais je cherche surtout à être dirigé dans la bonne voie, les bonnes solutions technologiques, voire vers le/les bons tutoriels où ce genre de chose est expliqué sans m'éloigner trop dans les méandres du javascript ou du php.

A bientôt

Bonjour.

Le mieux c'est de faire :
- une vérification de syntaxe des données saisies via Javascript, et cela dans votre page formulaire.
- un calcul côté serveur avec les données transmises via la methode POST.
- Ainsi vous ne serez pas obligé "d'investir" énormément dans Javascript, en revanche il faudra être attentif en PHP (mais ce langage est bcp + riche et + souple).

Un gros avantage réside dans la rapidité des contrôles côté client (presque immédiat puisque de l'ordre de la milliseconde). Cela évite des A.R inutiles qd la saisie n'est pas bonne (de l'ordre de la seconde quand le serveur est distant).
L'autre "immense" avantage est que l'utilisateur ne connaitra jamais vos algorithmes de calcul.
Il pourra certes, essayer de "shunter" vos contrôles JS, mais vous aurez aussi les moyens de le contrer...

Je vous donne un exemple très succint de page_formulaire avec contrôle JS /
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html><head> <script type="text/javascript"> function verif() { x = document.forms[0].elements['valeur_1'].value ; y = document.forms[0].elements['valeur_2'].value ; if ( x == 0 ) return false ; if ( y == 0 ) return false ; if ( x > y ) return false ;  return true ; } </script> </head><body> <FORM method="POST" action="page2.php" onsubmit="return verif()"> <input name="valeur_1" size="5"> <input name="valeur_2" size="5"> <input type="submit" value="Submit"> </FORM> </body></html>
Une fois cette page formulaire fonctionnelle, vous pourrez écrire "page2.php" afin d'y exécuter vos calculs...

14/06/2014, 03h35
ascito

Citation:

comment alimenter les variables de mon calcul javascript avec les valeurs saisies dans les formulaires ?

il semble que si tu utilise javascript, il soit bon de changer les valeurs de tes formulaires, ou toute partie de ta page, via le DOM

Citation:

comment passer les résultats des calculs à la seconde page html et les stocker dans des tableaux et dans d'autres formulaires ?

cela deviens plus pointue, car chaque chose porte un nom.

" à la seconde page html " => implique que tu doive changer de page, donc d'url, et donc avoir à recharger la page

En utilisant JavaScript tu pourrais changer le contenu de la page sans avoir à recharger l'intégralité de celle ci

Citation:

- le javascript seul suffit-il pour faire tout ça ou ai-je besoin de php ?

il faut que tu admettes que en 2005 nous t'aurions tous répondu "besoin de php", mais que maintenant des solutions en JavaScript sont possible, juste pour la tenue d'une base de données... En ce qui concerne la tenue d'un éventuel cookie; le cookie existe depuis longtemps..

tes questions sont simples, mais... peuvent avoir plusieurs réponses "sympa"... celons si tu travail avec des technos de + ou - 5 ans

voila voila..

Citation:

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.

Citation:

- 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 :

Code:

<input id="mon-joli-input" ... >

Ils te permettent d'accéder à l'élément HTML depuis ton script en appelant getElementById :

Code:

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 :
Code:

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 :
Code:

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 :

Code:

<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é.

Citation:

- 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 :
Code:

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 :
Code:

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 :
Code:

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 !

Citation:

- 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 :
Code:

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.

16/06/2014, 18h38
NoSmoking

Bonjour,

Citation:

Envoyé par Watilin

...j'apporte mes 5 centimes à mon tour.

on ne peut qu' :applo:...mais dis moi cela ne fait pas chère la ligne :lol:
18/06/2014, 02h41
Watilin

Rha ouais t'as raison j'aurais dû demander plus… Je ne suis pas un bon vendeur ! :aie: