Se connecter / S'enregistrer
Votre question

[PHP ou autre]Effectuer calcule a l'aide de champs saisissable par l'utilisateur

Tags :
  • Input
  • Php
Dernière réponse : dans Programmation
29 Mai 2013 22:44:57

Bonjour à tous,

Je voudrais effectuer un petit outil de calcul sur le web et j'aurais besoin d'aide.
Je voudrais que sur ma page internet il y ai 3 champs saisissable et que lors de l'appui sur un bouton ma page effectue le calcule des 3 champs et l'affiche dans un 4ème.

j'ai commencé à effectué un bout de code en php mais je ne sais pas si c'est le meilleur langage pour ça :

  1. <?php
  2.  
  3.  
  4.  
  5. $un = "100000,00";
  6. $deux = "240";
  7. $trois = "4,00";
  8. $quatre = "605,98";
  9.  
  10. if(isset($_REQUEST['calculer'])){
  11. $un = $_POSTE['id1'];
  12. $deux = $_POSTE['id2'];
  13. $trois = $_POSTE['id3'];
  14. $quatre = $un + $deux + $trois;
  15.  
  16. echo $un;
  17. echo $deux;
  18. echo $trois;
  19. echo $quatre;
  20.  
  21.  
  22. }
  23.  
  24. ?>
  25.  
  26. <form action="#" method="post" enctype="multipart/form-data">
  27. <p> CALCULER VOTRE MENSUALITE </p>
  28. <p>
  29. premiere valeur : <input type="number" id="id1" value="<?php echo $un; ?>" />€<br/>
  30. deuxieme : <input type="number" id="id2" value="<?php echo $deux; ?>" /><br/>
  31. troisieme : <input type="number" id="id3" value="<?php echo $trois;?>" />%<br/>
  32. quatrieme : <input type="number" id="id4" value="<?php echo $quatre; ?>" />€</p>
  33.  
  34. <input type="submit" value=" Calculer " name="calculer" style="cursor:pointer;"/>
  35. </form>


Mais cela ne fonctionne pas.
Pourriez-vous m'aider s'il vous plait ?

Je vous remercie par avance.

Autres pages sur : php effectuer calcule aide champs saisissable utilisateur

30 Mai 2013 17:53:34

Bonjour,

$_POST pas $_POSTE ^^ ( method="post" dans le formulaire, donc pourquoi "POSTE" en php ??? )

pour ce qui est du langage mon choix personnelle aurait était le javascript, cela aurait eviter le rechargement de la page a la validation du formulaire... mais cela n'engage que moi !

31 Mai 2013 11:07:30

Merci beaucoup Andrelec1 pour ta réponse.
Pour le $_POST autant pour moi c'est juste une faute de frappe de ma part
Je vais essayer de faire un bout de code en javascript et je verrai la différence =)
Pourras-tu m'aider en cas de besoin ?
1 Juin 2013 11:45:58

Donc j'ai dans ma page web des champs input en HTML :

  1. <form action="#" method="post" enctype="multipart/form-data">
  2. <p> CALCULER VOTRE MENSUALITE </p>
  3. <p>
  4. Montant du prêt : <input name="montant_pret" type="number" id="id1" Maxlength="7" value="<?php echo $montantpret; ?>" />€<br/><br/>
  5. Durée en mois : <input name="duree" type="number" id="id2" Maxlength="3" value="<?php echo $duree; ?>" /><br/><br/>
  6. Taux du prêt : <input name="taux" type="number" id="id3" Maxlength="3" value="<?php echo $taux;?>" />%<br/><br/>
  7. Mensualité hors assurance : <input disabled="disabled" name="mensualite" type="number" id="id4" value="<?php echo $mensualite; ?>" />€</p>
  8.  
  9. <input type="submit" value=" Calculer " name="calculer" style="cursor:pointer;"/>
  10. </form>


Et voici la fonction javascript que je voudrais utiliser :

  1. <script type="text/javascript">
  2. var capital = <?php echo $_POST['montant_pret']; ?>
  3. var nombre = <?php echo $_POST['duree']; ?>
  4. var taux = <?php echo $_POST['taux']; ?>
  5. i = taux / 1200.0;
  6.  
  7. m = capital*i*Math.pow(1+i,nombre)/(Math.pow(1+i,nombre)-1);
  8. var m_=m;
  9. m=Math.round(m);
  10. </script>


Je voudrais récupérer la valeur m de mon javascript et la réafficher dans le champs mensualité.
Pourrais tu m'aider pour ne pas utiliser du php et ne pas de ce fait re télécharger la page ?
2 Juin 2013 13:01:54

Houla ,la tu mélange le javascript , et le php ... , reste simple choisie un des deux ....
2 Juin 2013 13:37:48

met des attributs id à tes input.
et tu récupéreras les valeurs via document.getElementById('tonId').value

Et sinon, il faut mettre l'évènement onsubmit à ton formulaire pour exécuter ta fonction javascript
2 Juin 2013 15:42:47

Voila ou je suis de nouveau bloqué :

  1. <script type="text/javascript">
  2.  
  3. var capital = 100000;
  4. var nombre = 240;
  5. var taux = 4,00;
  6. var m = 605,98;
  7.  
  8. function valider(){
  9.  
  10. if(document.formSaisie.calculer.value != "") {
  11. capital = document.getElementById('id1').value;
  12. nombre = document.getElementById('id2').value;
  13. taux = document.getElementById('id3').value;
  14. i = taux / 1200.0;
  15. //la fameuse formule;
  16. m = capital*i*Math.pow(1+i,nombre)/(Math.pow(1+i,nombre)-1);
  17. var m_=m;
  18. m=Math.round(m);
  19.  
  20. }
  21. }
  22.  
  23. </script>
  24.  
  25. <form action="#" method="get" onsubmit="return valider()" name="formSaisie" enctype="multipart/form-data">
  26. <p> CALCULER VOTRE MENSUALITE </p>
  27. <p>
  28. Montant du prêt : <input name="montant_pret" type="number" id="id1" Maxlength="7" value="100000" />€<br/><br/>
  29. Durée en mois : <input name="duree" type="number" id="id2" Maxlength="3" value="240" /><br/><br/>
  30. Taux du prêt : <input name="taux" type="number" id="id3" Maxlength="3" value="4,00" />%<br/><br/>
  31. Mensualité hors assurance : <input disabled="disabled" name="mensualite" type="number" id="id4" value="605,98" />€</p>
  32.  
  33. <input type="submit" value="Calculer" name="calculer" style="cursor:pointer;"/>
  34. </form>


Par contre je n'arrive pas à récuperer les valeurs dans mes variables javascript et de ré-afficher mes variables javascript dans mon input html dans les values
2 Juin 2013 17:22:06

capital = document.getElementById('id1').value; => pour récupérer la valeur ...

document.getElementById('id1').value = capital ; => pour définir la valeur ^^
3 Juin 2013 11:55:50

Donc c'est bien ce que j'ai fais dans mon code javascript :

  1. function valider(){
  2.  
  3. if(document.formSaisie.calculer.value != "") {
  4. capital = document.getElementById('id1').value;
  5. nombre = document.getElementById('id2').value;
  6. taux = document.getElementById('id3').value;


je récupère bien les valeurs avec document.getElementById('id1').value.

donc je suppose que pour l'affichage des valeurs dans mes inpute ca sera de la sorte ? :
  1. <input name="montant_pret" type="number" id="id1" Maxlength="7" value="<script type="text/javascript">document.getElementById('id1').value; </script>" />


et mon problème après est dans la déclaration de mon formulaire.
Je veux qu'à l'appui sur le bouton calculer, passer dans la fonction javascript valider()
Donc je met sur mon inpute :
  1. <form action="#" onsubmit="return valider()" name="formSaisie" enctype="multipart/form-data">


faut-il que je mette un attribue methode dans mon input ?

Je vous remercie d'avance =)
3 Juin 2013 21:44:42

Quelque chose dans ce genre :
  1. <script type="text/javascript">
  2.  
  3. var capital = 100000;
  4. var nombre = 240;
  5. var taux = 4,00;
  6. var m = 605,98;
  7.  
  8. function valider(){
  9.  
  10. if(document.formSaisie.calculer.value != "") {
  11. capital = document.getElementById('id1').value;
  12. nombre = document.getElementById('id2').value;
  13. taux = document.getElementById('id3').value;
  14. i = taux / 1200.0;
  15. //la fameuse formule;
  16. m = capital*i*Math.pow(1+i,nombre)/(Math.pow(1+i,nombre)-1);
  17. var m_=m;
  18. m=Math.round(m);
  19. document.getElementById('id4').value = m;
  20. }
  21. return false;
  22. }
  23.  
  24. </script>
  25.  
  26. <form action="#" method="get" onsubmit="return valider()" name="formSaisie" enctype="multipart/form-data">
  27. <p> CALCULER VOTRE MENSUALITE </p>
  28. <p>
  29. Montant du prêt : <input name="montant_pret" type="number" id="id1" Maxlength="7" value="100000" /><br/><br/>
  30. Durée en mois : <input name="duree" type="number" id="id2" Maxlength="3" value="240" /><br/><br/>
  31. Taux du prêt : <input name="taux" type="number" id="id3" Maxlength="3" value="4,00" />%<br/><br/>
  32. Mensualité hors assurance : <input disabled="disabled" name="mensualite" type="number" id="id4" value="605,98" /></p>
  33.  
  34. <input type="submit" value="Calculer" name="calculer" style="cursor:pointer;"/>
  35. </form>
3 Juin 2013 22:07:21

danydan01 a dit :

donc je suppose que pour l'affichage des valeurs dans mes inpute ca sera de la sorte ? :
<input name="montant_pret" type="number" id="id1" Maxlength="7" value="<script type="text/javascript">document.getElementById('id1').value; </script>" />


non en fais : document.getElementById('id1') => représente ton champ le .value, la valeur ....

tu peut mètre la ligne ou tu veux dans ton code !!
4 Juin 2013 13:56:26

Merci à tous pour vos réponse =)
Mais j'ai encore une question parce qu'il y a une chose que je comprend pas...

je voudrais afficher le contenu de :
  1. document.getElementById('id4').value = m;


dans le champ value de mon input html (que j'ai écris en rouge) :
Mensualité hors assurance : <input disabled="disabled" name="mensualite" type="number" id="id4" value="*********ICI***********" />€</p>

Donc pas d'affichage dans une popup avec alert() ou d'affichage dans un fichier texte à l'aide de windows.document....
J'ai l'esprit embrouillé et ya un truc que je ne pige pas =/
4 Juin 2013 20:51:01

Ouiiiiiiiiiiiiiiiiiiii J'ai réussi à faire ce que je voulais =)
Par contre j'ai une dernière question à vous poser.
J'ai un souci dans ma ligne de code ci dessous :
  1. document.write('Durée en mois : <INPUT TYPE="number" ID="id2" Maxlength="3" onkeyup="verif_nombre(this);" style="width:60px; height:20px;" NAME="duree" VALUE="' + nombre + '"></h3><br/><br/>');

Sous Google Chrome le Maxlenght ainsi que le onkeyup="verif_nombre(this);' ne fonctionne pas, je peux toujours saisir plus de 3 chiffres dans mon champs ...

Auriez vous une idée du pourquoi du comment ? (cela fonctionne correctement sous firefox et IE)
4 Juin 2013 21:35:00

onkeyup="return verif_nombre(this);" ?

Vu qu'on ne sait pas à quoi ressemble ta fonction verif_nombre c'est compliqué...
4 Juin 2013 22:33:28

danydan01 a dit :

  1. document.write('Durée en mois : <INPUT TYPE="number" ID="id2" Maxlength="3" onkeyup="verif_nombre(this);" style="width:60px; height:20px;" NAME="duree" VALUE="' + nombre + '"></h3><br/><br/>');


AU BUCHERRRRRRRRRRRRRRRRRRRRRRRRRRRRRR !!!!!

Voila un code simple dont tu vas pouvoir t'inspirer :
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function lol(){
  5. var a = document.getElementById('id1').value ;
  6. var b = document.getElementById('id2').value ;
  7. document.getElementById('id3').value = parseFloat(a) + parseFloat(b);
  8. };
  9. </script>
  10. </head>
  11. <body>
  12. <form>
  13. <input TYPE="number" ID="id1" style="width:60px; height:20px;" name="duree" value="" />
  14. <input TYPE="number" ID="id2" style="width:60px; height:20px;" name="duree" value="" />
  15. <input TYPE="number" ID="id3" disabled="disabled" style="width:60px; height:20px;" name="duree" value="" />
  16. <input type="button" onClick="lol();" value="goooooooooooooo" />
  17. </form>
  18. </body>
  19. </html>


On notera l'utilisation de " parseFloat " qui vas ici forcé les variables a être des nombres ( car si non 1 + 2 = 12 )
Vive les langage non typé !!!!!!


5 Juin 2013 08:45:56

@Omar, justement je n'ai pas mis le code parce que ce n'est pas important.
Mon problème étant juste que ma ligne de code marche très bien sur Firefox et IE mais pas sur GoogleChrome =/
Je n'arrive pas à comprendre pourquoi un simple Maxlength="7" n'est pas pris en compte...

@Anderlec1, Ok je veux bien croire que mon code est vraiment sale ^^
Alors dans ce cas la je t'explique ce que je souhaite faire et pourquoi j'ai choisi de faire comme ça :
Donc je laisse à l'utilisateur la possibilité de saisir 3 champs ( à l'aide d'input html)
Lors de l'appui sur un bouton j'effectue un calcul dans une fonction j'avascript et le résultat de cette fonction je voudrais le ré-afficher dans le value d'un quatrième champs input non saisissable par l'utilisateur ( ce champ sert juste à afficher le calcul )
Donc ma question est la suivante très cher : comment tu ferais pour afficher la valeur de la fonction javascript dans la value du dernier input ci dessous :
  1. <input TYPE="number" ID="id3" disabled="disabled" style="width:60px; height:20px;" name="duree" value="" />


J'ai utilisé la ligne de code document.write... comme je l'ai écrite un peux plus haut car je pouvais faire VALUE="' + nombre + '" et afficher ma valeur javascript dans mon champ input HTML =)
5 Juin 2013 11:50:43

A tu regarder/tester mon code ?
Il fais exactement ce que tu demande ( enfin , il ce limite a une simple addition mais le principe est la ) !!!
5 Juin 2013 14:04:56

Autant pour moi @Andrelec1, je mérite d'aller sur le bucher pour de vrai ^^
J'essaye ton code ce soir et je reviens vers vous pour vous parler du dénouement (heureux je l'espère) de la suite des événements =)
5 Juin 2013 20:04:48

Merci beaucoup Andrelec1 ton code fonctionne à merveille.
Je l'ai adapté suivant mes besoins et ça marche très bien et c'est beaucoup plus propre ainsi =)
Par contre le Maxlength ne fonctionne toujours pas sous google Chrome =/
Et vous connaissez une fonction en javascript qui oblige un format à saisir ? Je voudrais que mon champ taux est obligatoire le format X.XX (ex : 4.00) en gros d'avoir une virgule et deux chiffre après ?!
5 Juin 2013 20:49:11

En théorie cela est faisable grâce a l'HTML5 ( http://www.w3schools.com/tags/tag_input.asp )
Dans ton cas, la vérification ce ferais grâce a l'attribut "pattern" ( http://www.w3schools.com/tags/att_input_pattern.asp ), avec une regex du type : ^[0-9]+(?:\.[0-9]+)$

Mais dans la pratique c'est bien diffèrent, cela vas fonctionner sur certain navigateur mais d'autre vont complément ignorer le pattern a respecter !!!

Ceci dit, tu peut aussi vérifier cela en JavaScript !
Un simple if a l'entrer de ta fonction qui déclencherais une alert(); ou autre ...
Voila un peut de doc sur les regex en javascript http://www.w3schools.com/js/js_obj_regexp.asp ( avec un .test() et la regex que j'ai écrite plus haut , tu devrait t'en sortir )

Edit : j’anticipe sur le code que tu vas écrire ... ^^

Si, tu codé dans les règles de l'art et surtout sous le contrôle d'un psychopathe prés a te torturer a chaque point virgule oublier, ou tous entrave a la syntaxe/nomenclature JavaScript , tu serais depuis longtemps que techniquement les "procédure" n’existe pas en JavaScript ...
IL N'Y A QUE DES FONCTION ... UNE FONCTION CE TERMINE PAR UN RETURN, POINT-VIRGULE !
(Je sens qu'un vieux traumatise qui me hante a refais surface ... )

Donc l'on reprend, une fonction ce termine par un return ...

une fonction ce termine par un return ...


  1. function returnToThePast(BackToTheFutur){
  2. if(BackToTheFutur == true){
  3. alert("I'm a time traveler !!");
  4. return;
  5. }
  6.  
  7. alert("Are you dead before you born ?");
  8. return;
  9. }


Ici, si l'on appelle notre fonction avec true en argument, l'on rentre dans le if ... on affiche notre superbe alert(); ... on arrive donc au return;
Citation :
une fonction ce termine par un return ...


Ha bas c'est la fin notre fonction a fini sont exécution !!!!!!!
6 Juin 2013 08:46:26

Calm down Andrelec1, ne passe pas du coté obscure de la force :pt1cable: 
Je te remercie pour toutes ces solutions =)
Donc pour les regex j'en utilise déjà une pour le contrôle des champs saisissable (n'autoriser que les chiffres ainsi que les ',' ou '.' ), je pense pouvoir essayer de m'en sortir.
Je reviendrais vers toi dès que j'aurais pondu un bout de code ;) 

Sinon aurais-tu une idée sur l'erreur de syntaxe (enfin je soupçonne que ce soit ça) pour laquelle sous google chrome le maxlength des input n'est pas pris en compte ?
Parce qu'avec ton code ci-dessous ça marche pas sous chrome mais je ne vois vraiment pas ou est l'erreur de syntaxe ?

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function lol(){
  5. var a = document.getElementById('id1').value ;
  6. var b = document.getElementById('id2').value ;
  7. document.getElementById('id3').value = parseFloat(a) + parseFloat(b);
  8. };
  9. </script>
  10. </head>
  11. <body>
  12. <form>
  13. <input TYPE="number" ID="id1" style="width:60px; height:20px;" name="duree" value="" />
  14. <input TYPE="number" ID="id2" style="width:60px; height:20px;" name="duree" value="" />
  15. <input TYPE="number" ID="id3" disabled="disabled" style="width:60px; height:20px;" name="duree" value="" />
  16. <input type="button" onClick="lol();" value="goooooooooooooo" />
  17. </form>
  18. </body>
  19. </html>
6 Juin 2013 08:53:08

Autant pour moi je viens de trouver tout seul.
Le problème est que pour les input de type="number" l’attribue maxlength ne fonctionne pas, il faut utiliser max="..." et min="..."
Voila tout =)
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS