Calcule dans javascript et les formulaires

Résolu/Fermé

DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017 - 21 avril 2016 à 00:54
DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017 - 25 avril 2016 à 00:19

Bonjour à vous.
Aidez moi s'il vous plait. je voudrais avoir des lettres qui représente des nombres précis dans plusieurs balise select (exemple: select1: A = 50 et select2: B=20). Ensuite, lorsque je sélectionne A et ensuite B, que la valeur de ces deux (50 et 20) soit additionnée et lorsque je clique sur un bouton, que le résultat s'affiche dans un input box. tout ceci en HTML avec javascript et les formulaires. comment faire? Je notifie que je suis vraiment débutant en programmation. merci d'avance

A voir également:

Calcul javascript
Calcul moyenne excel - Guide
Telecharger javascript - Télécharger - Langages
Calcul km marche à pied gratuit - Télécharger - Sport
Calcul charpente bois gratuit - Télécharger - Architecture & Déco
Javascript round ✓ - Forum Javascript

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38465 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2025 4 741
21 avril 2016 à 13:39

Bonjour,
Et ?

Qu'as tu commencé à écrire comme code ?
As tu au moins commencé à faire le formulaire ?

Sachant que tu peux (dois...) utiliser les attributs "value" dans tes OPTIONS pour affecter une valeur à un text.

 <select id='monSelect1'>
 <option value='50'>A</option>
 <option value='70'>B</option>
 <option value='80'>C</option>
</select>

Ensuite, en Javascript, pour récupérer la valeur de l'élément selectionné, tu peux faire :

var valeur1 = document.getElementById('monSelect1').value;

Après.. ne te reste plus qu'à faire pareil pour toutes tes listes ... et à faire une simple mutliplication..

Réponse 3 / 6

DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017
21 avril 2016 à 16:02

Jordan
Je n'ai pas pu avoir le résultat que j'attendais.
Aide moi à trouver le code qu’il faut au niveau du SCRIPT S’il te plait. Je te montre l’idée que j’ai au niveau du formulaire.
Je voudrais que lorsque je sélectionne une valeur ( A par exemple) ensuite une autre (BB) et enfin (C) , lorsque je vais cliquer sur le bouton calculer, que la somme additionnée des trois choix s’affiche dans le input box du formulaire.
Aide-moi stp. Merci d’avance

<SCRIPT LANGUAGE="javascript">
function AFFICHE(calculer){

}
</SCRIPT>
<form id="text" name="form">
<select id='monSelect1'>
<option value='50'>A</option>
<option value='40'>AA</option>
</select>
<select id='monSelect2'>
<option value='70'>B</option>
<option value='60'>BB</option>
</select>
<select id='monSelect3'>
<option value='80'>C</option>
<option value='70'>CC</option>
</select>
<input type="text" id="valeur1" value=""/>
<input type="button" value="Calculer" onclick="javascript:AFFICHE()">
</form>

Réponse 4 / 6

jordane45 Messages postés 38465 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2025 4 741
21 avril 2016 à 17:56

1 - Merci d'utiliser les balises de code lorsque tu postes du code sur le forum. Merci de lire ceci : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Le code à faire est :

<script type="text/javascript"> 
function calcul(){ 
 var valeur1 = document.getElementById('monSelect1').value;
 var valeur2 = document.getElementById('monSelect2').value;
 var valeur3 = document.getElementById('monSelect3').value;
 
 var resultat = parseInt(valeur1) + parseInt(valeur2) + parseInt(valeur3);
 
 var total = document.getElementById('total');
     total.value = resultat;
} 
</script> 

 <form id="text" name="form"> 
	 <select id='monSelect1'> 
		 <option value='50'>A</option> 
		 <option value='40'>AA</option> 
	 </select> 
	<select id='monSelect2'> 
		<option value='70'>B</option> 
		<option value='60'>BB</option> 
	</select> 
	<select id='monSelect3'> 
		<option value='80'>C</option> 
		<option value='70'>CC</option> 
	</select> 
	<input type="text" id="total" value=""/> 
	<input type="button" value="Calculer" onclick="calcul()"> 
</form>

Réponse 5 / 6

DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017
22 avril 2016 à 23:48

Bonsoir Jordane. Merci pour le code. Celà m'a permis de comprendre un peu comment çà fonctionne. Mais j'ai l'impression que quelque chose ne va pas à mon niveau. J'ai utilisé exactement le code mais je n'ai toujours aucun résultat dans le Input. Que faire s'il te plait?
Merci

jordane45 Messages postés 38465 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2025 4 741
23 avril 2016 à 00:39

Tu as copié collé le code tel quel ?
Montres nous ce que tu as exactement dans ta page .
N'aurais tu pas d'autres lignes de code (qui pourraient causer une erreur) ?
Si tu regardes avec les outils de debugage de ton navigateur (je te conseille d'utiliser le plugin FIREBUG pour Firefox) , dans la "console" ... tu as des choses d'indiquées ?

Réponse 6 / 6

DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017
24 avril 2016 à 11:39

Bonjour Jordane.
Infiniment merci pour tout ce que tu fais aux demendeurs comme nous. Je faisais des conneries; lorsque j'ai copié et collé le code tel que tu me l'as envoyé, celà a mercher correctement comme je le voulais. Infiniment merci pour ton Aide et que Dieu te bénisse.
Je vais poster une autre question pour la suite de ce que je fais. Merci de m'aider encore.

rankere
24 avril 2016 à 12:46

Salut à tous,
un tuto débutant javascript ça aide, on est tous passé par là(pas forcément un tuto du web mais apprendre reste le meilleur moyen de savoir XD) .

Quelques remarques(j'allais m'y coller mais Jordane45 l'a fait):

On a dit déjà dit qu'on pouvait indiquer un élément(balise) HTML de la page pour pouvoir l'utiliser avec javascript(DOM), ici l'attribut ID='monselect1'.

dieu n'a rien à voir avec ça...j'espère en tout cas je suis adulte et pas besoin d'ami imaginaire ;)

Comme on le voit ici:

function AFFICHE(calculer){ 

}

En programmation(on connait un langage de programmation on les connaît tous à quelques subtilités près), ici javascript on peut indiquer une série d'instructions et l'appeler. Cela s'appelle une fonction.
Ici dans votre première idée la fonction AFFICHE existe mais est vide donc ne fait rien.

En informatique et à fortiori en programmation il faut faire attention à la respecter la casse des caractères(majuscules et minuscules).
Par convention ce sont des variables spécifiques qui s'écrivent en majuscules, les variables dites constantes qui contiennent des valeurs qui ne doivent pas être modifié par le programme. En clair il est dangereux et pas pratique d'écrire minuscules et majuscules, on oublie de mettre la minuscule ou la majuscule et c'est des heures à chercher parmi des centaines de lignes d'où vient l'erreur.

La norme en javascript est d'écrire tout en minuscule(nom de variable, nom de fonction), c'est commun à presque tout les langages.

Pour les fonctions la norme javascript(ECMASCRIPT) est lorsque l'on a 2 mots d'utiliser un majuscule pour les mots suivants le premier.
Ex:

function() calculAddition{/*les instructions ici*/}
ou bien 
function() calculAjoutNombres(){
/*...*/

}

C'est une norme uniquement donc pas indispensable mais juste pratique pour s'y retrouver et avoir un code clair que tout le monde puisse lire.
Bien sûr avec des noms de variables et de fonction le plus clair possible :)

Comparez:

var a=10;/*ici on sais pas à quoi correspond a il faut chercher dans le code*/
var nombrejours=10;/*Tout de suite plus évident, on sait de quoi il s'agit et ça aidera à trouver dans quel ligne du code la variable est utilisée*/

Bon venons en au choses intéressantes.

Donc nous avons établit qu'une fonction est un bout de programme que l'on peut utiliser dans notre programme. En javascript c'est un peu différent d'autres langages car les fonctions peuvent être utilisées comme des variables. Détail mais cela à parfois ses avantages

function()afficheBonjour{
console.log('Bonjour');
}
//est (presque)rigoureusement identique(la différence vient du ùmot clé var) à 
var afficheBonjour=function(){
console.log('Bonjour');
}

Détail mais cela servira plus tard si vous vous intéressez à javascript qui utilise une orientation objet. Pour faire simple l'objet c'est une structure de programmation qui n'est pas séquentielle. PAr programmation séquentielle on entends une suite d'instructions qui se lit du bout à la fin du programme.

rankere
24 avril 2016 à 12:46

Mais revenons à votre calculateur.

On voit bien que la programmation ici n'est pas séquentielle:
Il ne suffit pas d'afficher la page pour obtenir le calcul.

Ceci à fait la fortune(et l'intérêt) de javascript dans les temps anciens des débuts d'Internet.

En effet on parle de programmation événementielle, écouteur plus précisément(listener) ou même de modèle observateur/observé si on veux être plus pointilleux.

Ici l'écouteur c'est le bouton de validation du formulaire:

<input type="button" value="Calculer" onclick="calcul()">

Plus précisément l'écouteur du bouton 'guette' que l'utilisateur appuie sur le bouton (onclick) pour si c'est le cas 'déclencher' la fonction calcul() du code.

Pour l'exemple et la simplicité Jordane45 a écrit directement l'appel à la fonction(c'est le nom quand on utilise une fonction) dans la balise avec l'attribut onclick=...

Une autre façon de faire(recommandée mais plus compliqué à comprendre au début) est de le faire directement dans le code javascript avec une fonction prévue pour cela:
Cet(te fonction se nomme addEventListener (traduction: ajoute un écouteur d'événement)
notice ici:
http://www.w3schools.com/jsref/met_element_addeventlistener.asp

Pour repérer le bouton on va lui attribuer l'identifiant 'monBouton' comme ceci:

<input type="button" id="monBouton" value="Calculer" > 

<!--Il sera donc identique d'écrire:-->
<input type="button" id="monBouton" value="Calculer" onclick='calculer' > 

document.getElementById("myBtn").addEventListener("click", function(){
    calcul();
});

Cette méthode par rapport à l'utilisation de l'attribut onclick= directement dans le bouton à plusieurs avantages non négligeables. L'un d'eux est de bien séparer le javascript du HTML, ainsi on peut changer aisément l'un sans avoir à modifier l'autre et vice et versa.
Mais pour un début vous pouvez continuer avec les listeners/écouteurs directement dans le HTML en sachant qu'il faudra passer à l'autre méthode tôt ou tard qui a de nombreux avantages, ou plutôt n'a pas les inconvénients de l'autre et sera une façon de faire beaucoup plus claire surtout si vous avez plusieurs boutons ou plusieurs fonctions à appeler lors d'un événement.

Voilà vous en savez déjà plus sur la programmation événementielle, mais que ça vous disepnse pas de passer par les bases et d'approfondir le DOM, les API HTML5 et bien d'autres choses qui font de javascript partie intégrante des sites web et s'est largement amélioré ces 15 dernières années(au point de devenir incontournable et d'offrir une quasi infinité de solutions; ex: les frameworks comme JQuery, la manipulation du CANVAS HTML qui permet de dessiner ou faire des animations facilement....).

DAMMON Messages postés 25 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 20 janvier 2017
25 avril 2016 à 00:19

Bonjour rankere
Merci pour l'info. Mais en réalité, je ne sais vraiment pas à quoi celà a répondu par rapport à mes questions.
Merci

Discussions similaires

Enregistrer un formulaire PDF une fois rempli

aide a trouve le formulaire de demande d'assistance

Problème avec les réponses de Google Forms

Formulaire de saisie dans excel 2016

formulaire de connexion

formulaires