Formulaire Calcul HTML Javascript Help!

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Formulaire Calcul HTML Javascript Help!

sobe1991

Hello,

Je ne m'y connais absolument pas en code, je sais faire des choses très simples comme des formulaires textes à remplir, mais là je me lance un nouveau défi, c'est de créer un formulaire qui va pouvoir calculer les couts de déplacements des utilisateurs.

Voici mes variables (à rentrer donc par l'utilisateur): Nombre de déplacement - Nombre de KM /déplacement - Nombre de nuit d'hotel/deplacement - Temps de trajet par déplacement

Je veux que ca puisse me donner un premier résultat : Cout par déplacement= (Nombre de KM /déplacement * 1.3) + (Nombre de nuit d'hotel/deplacement * 100 ) + (Temps de trajet par déplacement * 9.7)

Puis partant de ce premier résultat, on calcule le deuxième résultat: cout des déplacement par mois: Nombre de déplacement * Cout par déplacement .

En regardant plusieurs cours, et plusieurs exemples, voici ce que j'ai pu faire: (Merci d'avance pour toute l'aide que vous pourrez m'apporter.)

<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: lightyellow;
}
span {
display: inline-block;
width: 100px;
}
</style>
<script type="text/javascript">
function calcul()
{
var Nombredeplacement = document.getElementById("Nombredeplacement" );
var KM = document.getElementById("KM" ).value;
var hotel = document.getElementById("hotel" ).value;
var Tpstrajet = document.getElementById("Tpstrajet" ).value;
var Coutdeplacement = document.getElementById("Coutdeplacement" ).value;
var Cout total/ mois = document.getElementById("totalmois" ).value;
Coutdeplacement.value =((document.getElementById("KM" ).value * 1.3)+(document.getElementById("hotel" ) * 100)+(document.getElementById("Tpstrajet" ).value * 9.7));

return false;
}
</script>
<script type="text/javascript">
function calcul()
{
var Nombredeplacement = document.getElementById("Nombredeplacement" );
var KM = document.getElementById("KM" ).value;
var hotel = document.getElementById("hotel" ).value;
var Tpstrajet = document.getElementById("Tpstrajet" ).value;
var Coutdeplacement = document.getElementById("Coutdeplacement" ).value;
var Couttotalmois = document.getElementById("totalmois" ).value;
totalmois.value =(document.getElementById("Coutdeplacement" ).value * document.getElementById("Nombredeplacement" ));
return false;
}
</script>
</head>
<body>
<form method="post" action="" name="Coût des déplacements">
<span>Nombre de déplacements</span><input id="Nombredeplacement" name="Nbre déplacement" type="text" size="20"></input><br />
<span>Nombre Km</span><input id="KM" name="Nombre de KM" type="text" size="20"></input><br />
<span>Nombre de nuit d'hotel</span><input id="hotel" name="Nombre de nuit d'hotel" type="text" size="20"></input><br />
<span>Temps de trajet par déplacement</span><input id="Tpstrajet" name="Temps de trajet par déplacement" type="text" size="30"></input><br />
<span>Coût du déplacement</span><input id="coutdeplacement" name="Coût du déplacement" type="text" size="30"></input><br />
<span>Coût Total par mois</span><input id="totalmois" name="Coût Total par mois" type="text" size="30"></input><br />
<br />
<input type="reset" name="reset" value=" Tout recommencer "></input>
<input type="submit" name="submit" value=" Valider " onclick="calcul();"></input><br />
</form>
</body>
</html>

Publicité

pjulienne

Bonjour sobe1991,
Le code que tu as écrit ne fonctionne pas, car je l'ai testé sur mon Wamp et ça ne donne rien, je peux écrire le code de calcule en PHP, mais le problème c'est que les résultats seront affichés sur la deuxième page

---------------
Comment regarder la TV sans le câble ? https://how-to.watch/fr/tv-sans-cable/

MaybeEijOrNot

but someone at least

Bonjour, je crois que le titre du sujet est assez explicite, il souhaite faire ses calculs en JS.
Après c'est difficile de répondre quand il n'y a pas de question...

Merci de commencer par mettre le code entre balises.

Ensuite, un coup d'oeil rapide, me permet de dire qu'il y a déjà un gros problème : deux fonctions sont créées avec le même nom. Comment le script peut-il les différencier ?

Sans regarder dans le détail, cette ligne est catastrophique :

Code :

totalmois.value =(document.getElementById("Coutdeplacement" ).value * document.getElementById("Nombredeplacement" ));

L'objet "totalmois" n'est pas définie donc ça va être difficile de modifier sa propriété "value". Ensuite tu multiplies la valeur de l'élément "Coutdeplacement" par l'objet "Nombredeplacement" et non sa valeur.
De plus tu venais de définir à la ligne précédente une variable contenant la valeur de l'élément "Coutdeplacement" alors pourquoi ne pas la réutiliser ?

Message édité par MaybeEijOrNot le 05-05-2018 à 13:43:01

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

FORUM HardWare.fr

Programmation

HTML/CSS

Formulaire Calcul HTML Javascript Help!

Sujets relatifs
[Symfony 3.x] Formulaire dans une popup en include	Formulaire (de merde)
PowerPoint en HTML	[HTML/CSS][Javascript/Node.js] Formation Toulouse / Haute-Garonne
Excel 2016 - Inscription données saisie par formulaire	Javascript et formulaire pdf
scroll deux pages liens même endroit = javascript ?	Afficher les résultats aléatoires sur page html ->innerHTML
Plus de sujets relatifs à : Formulaire Calcul HTML Javascript Help!

Page générée en 0.048 secondes