Formulaire de calcul - HTML/CSS - Programmation
Marsh Posté le 26-09-2007 à 14:46:58
Le onClick est mal placé et en plus mieux vaut utiliser le onChange :
Places :
<select name="places" onChange="cal()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
Tarifs :
<select name="tarifs" onChange="cal()">
<option value="2">Jeune
<option value="4">Adulte
</select>
Marsh Posté le 26-09-2007 à 15:12:48
Merci pour la réponse, c'est l'effet que j'attendais.
J'ai rajouter un second choix, et j'aimerai l'additionner, mais çà ne marche pas...
Je dois modifier quoi ?
Je ne sais pas si c'est possible, mais j'ai un grand tableau, avec plein de valeurs.
Voici un exemple en dessous.
J'aimerai un choix entre "Test" et "Momo" et suivant "Maman", celà m'affiche le résultat.
ex: test = 5 et maman = 15 => afficher :20 et ce dernière, sera afficher pour être ensuite calculer... comment faire ceci ?
Maman 10 15 20
Test 5 12 20 30
Momo 6 13 30 40
Code :
|
Marsh Posté le 26-09-2007 à 15:48:38
Je n'ai pas tout compris avec "momo", "maman" et "test"...
En tout cas, si c'est pour faire le total des 2 multiplications (resultat et resultat2), voici ce que tu peux faire :
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
function cal() {
var pl=document.form1.places.value;
var tf=document.form1.tarifs.value;
var resultat=pl*tf;
document.form1.tresultat.value=resultat;
document.formfin.tresultatfin.value = calfin();
}
function cal2() {
var pl2=document.form2.places2.value;
var tf2=document.form2.tarifs2.value;
var resultat2=pl2*tf2;
document.form2.tresultat2.value=resultat2;
document.formfin.tresultatfin.value = calfin();
}
function calfin() {
var r1=form1.tresultat.value;
var r2=form2.tresultat2.value;
return (parseInt(r1)+parseInt(r2));
}
</script>
<form name="form1">
Places :
<select name="places" onChange="cal()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
Tarifs :
<select name="tarifs" onChange="cal()">
<option value="2">Jeune
<option value="4">Adulte
</select>
<br><br>
<input type="text" value="0" name="tresultat">
</form>
<form name="form2">
Places2 :
<select name="places2" onChange="cal2()">
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
</select>
Tarifs2 :
<select name="tarifs2" onChange="cal2()">
<option value="10">Fille
<option value="20">Garçon
</select>
<br><br>
<input type="text" value="0" name="tresultat2">
</form>
<form name="formfin">
Résultat :<input type="text" value="0" name="tresultatfin">
</form>
</BODY>
</HTML>
Pour info, tes balises "form", ne te servent pas à grand chose içi....
Marsh Posté le 26-09-2007 à 18:49:06
Merci très bien.
Je peux remplacer mes balises "Form" par quoi ?
Aussi, est-ce que dans mes liste, je pourrai mettre une valeur à la main, a la place des choix dans la liste ?
Sinon, pour l'histoire avec "momo", "maman" et "test"... j'ai rechanger un peux :
J'aimerai un choix (liste) entre "Vitesse (500)" et "Vitesse (700)" et suivant "diamètres", celà m'affiche le résultat.
Voici le genre de tableau :
diamètres 10 15 20
Vitesse (500) 12 20 30
Vitesse (700) 13 30 40
Une première liste avec comme choix, Vitesse 500 ou vitesse 700.
Ensuite une autre liste avec diamètres 10,15 ou 20
Et le résultat se mettra dans une autre case.
ex:
1er liste selectionner : Vitesse (500) => ce qui me donne comme choix 12,20 ou 30 en rapport au diamètre.
2eme liste selectionner : diamètres 15 =>ce qui a pour but de me filtrer la valeur "20" et me l'afficher dans une case.
Ensuite la valeur de cette dernière case, je souhaite l'utiliser dans un calcul.
Merci d'avance
Marsh Posté le 26-09-2007 à 22:29:06
Vu qu'il n'y pas de soumission de formulaires (tes données ne sont pas envoyées à un serveur et traitées par un script), il n'est pas nécessaire d'utiliser de balises "form"...
Maintenant si pour une question de lisibilité tu préfères, pourquoi pas mais moi je les enlèverai...
Sois tu utlises une liste ("select" ), soit un texte ("input" ), il n'existe pas de combinaison des deux...
Alors, oui, tu peux utiliser une zone de de saisie, le code pour le calcul sera sensiblement le même, voire le même...
En revanche, il sera judicieux de rajouter des tests pour être sûr que les valeurs entrées sont bien des nombres et pas des lettres...
Je crois comprendre ce que tu veux. Si il n'existe pas de formulaires mathématiques pour calculer les valeurs (12,20,30,13,30,40) en fonction de la vitesse et du diamètre, il va falloir repenser ton programme : utliser un tableau peut-être,...
Marsh Posté le 27-09-2007 à 08:18:06
Bonjour
Je viens de trouver une source, qui me faits l'effet souhaiter, mais le pb, c'est des mots...
Je dois changer quoi, pour y mettre des chiffres, et que a partir de la valeur de ma dernière liste, celà calcul avec une autre ?
J'aimerai aussi que à partir du code suivant, en selectionnant la première liste, et en fonction du choix, celà me filtre la seconde liste, mais aussi que en fonction de la 1ere liste, un resultat est affiché dans une case.
Code :
|
Marsh Posté le 27-09-2007 à 10:50:56
Un truc du genre :
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
var liste = new Array(new Array(12,20,30),
new Array(13,30,40));
function genres(nom_formulaire) {
var s1 = document.forms[nom_formulaire].sel1;
var s2 = document.forms[nom_formulaire].sel2;
var r = document.forms[nom_formulaire].res;
r.length = 0;
for(var n=0; n < liste[s1.selectedIndex].length; n++) {
r.length++;
r.options[r.length-1].text = liste[s1.selectedIndex][n];
}
r.selectedIndex = s2.selectedIndex;
}
</script>
</HEAD>
<BODY>
<form name="frm">
Vitesse
<select name="sel1" id="sel1" onChange="genres('frm');">
<option selected>500</option>
<option>700</option>
</select>
Diamètres
<select name="sel2" id="sel2" onChange="genres('frm');">
<option>10</option>
<option>15</option>
<option>20</option>
</select>
Resultat :
<select name="res" id="res">
</select>
</form>
<script type="text/javascript">
genres('frm');
</script>
</BODY>
</HTML>
Marsh Posté le 27-09-2007 à 13:54:07
Merci c''est sympas.
Mais...
C'est normal que le résultat est dans une liste ? ce serai mieux une case.
C'est possible de mettre "choix" a la place de valeur par defauts dans les listes ?
Par contre, je ne sais pas si celà est possible, mais lorsque je choisis vitesse (500 ou 700) et en gardant les reste des liste, j'ai une valeurs qui s'affiche dans une case a part ?
long diamètres 10 15 20
Vitesse (500) 255 12 20 30
Vitesse (700) 455 13 30 40
Ce qui donne :
choix, vitesse 500, celà m'affiche dans une case la valeur "long : 255", et ensuite, le reste des listes reste identique au fonctionnement.
Merci d'avance
Marsh Posté le 27-09-2007 à 14:17:12
Alors, si j'ai bien tout compris :
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
var liste = new Array(new Array(12,20,30),
new Array(13,30,40));
function genres(nom_formulaire) {
var s1 = document.forms[nom_formulaire].sel1;
var s2 = document.forms[nom_formulaire].sel2;
var res = document.forms[nom_formulaire].resultat;
var lg = document.forms[nom_formulaire].long;
lg.value = s1.options[s1.selectedIndex].value;
if (s1.value != "nul" && s2.value != "nul" ) {
for(var n=0; n < liste[s1.selectedIndex-1].length; n++) {
if (s2.selectedIndex == (n+1)) {
res.value = liste[s1.selectedIndex-1][n];
}
}
} else {
res.value = 0;
}
}
</script>
</HEAD>
<BODY>
<form name="frm">
Vitesse
<select name="sel1" id="sel1" onChange="genres('frm');">
<option value="nul">Choix</option>
<option value="255">500</option>
<option value="455">700</option>
</select>
Diamètres
<select name="sel2" id="sel2" onChange="genres('frm');">
<option value="nul">Choix</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<br>
Long :
<input type="text" value="0" name="long">
Resultat :
<input type="text" value="0" name="resultat">
</form>
<script type="text/javascript">
genres('frm');
</script>
</BODY>
</HTML>
Marsh Posté le 27-09-2007 à 15:17:13
ok, merci pour cette aide précieuse.
Voilà, maintenant, je vais mélanger le calcul, et les listes...
Mais j'aimerai savoir, si c'est possible de faire 3 autres choses le tout en javascript :
- enregistrement des différentes valeurs et choix dans les listes, et chiffres calculer ?
-Faire une sorte d'arbre généalogique avec assemblages, pièce(s), nombres, répéres, observations, aparition des différents calcul puis total...
- modification par la biais d'un lien dans l'arbre des enregistrement pour les mettre à jour (changer une ou plusieurs valeurs ou choix par exemple, le calcul se mettra à jour)
je ne sais pas si celà est bien clair...je ne sais pas du tout si cela marchera en javascript, ou si je dois tout passer dans un autre language.
Ensuite, je ne sais pas si mettre les valeurs des différents listes, dans un ou plusieurs fichiers externe avec un chemin précis, est réalisable ? (mettre à jours ce ou ces fichiers par la suite)
Merci d'avance pour tout
Marsh Posté le 27-09-2007 à 15:32:05
Oula, ça doit être possible en javascript mais celui-ci n'est pas vraiment adapté à ce que tu voudrais faire...
Visiblement, ce ne sera pas une application web, autant s'orienté vers un autre language plus adapté:
- VisualBasic : simple, accessible mais payant
- Java : plus complexe (vraiment plus complexe) mais gratuit...
Aller, c'est en développent qu'on devinet développon... Courage
Marsh Posté le 27-09-2007 à 15:46:47
Par le biais du PHP ? ce n'est pas possible ?
Si je mets çà en java, je dois avoir quoi pour le réaliser ? toujours un bloc notes ?
J'ai besoin de quoi ensuite pour le lancer ?
Merci beaucoup
Marsh Posté le 27-09-2007 à 16:40:42
Si biensûr, c'est faisable en PHP...
En Java, il te faudra un environnement de dev comme Eclipse...
Sûr qu'en PHP, ce sera plus simple....
Marsh Posté le 27-09-2007 à 16:52:07
dzing35 a écrit : En Java, il te faudra un environnement de dev comme Eclipse... |
Pratique certes mais pas indispensable.
Le JDK en revanche ça serait pas mal de l'avoir!
Marsh Posté le 27-09-2007 à 16:59:45
Ben, ne serait que pour le complémention un IDE, c'est quand même pratique...
Marsh Posté le 28-09-2007 à 04:03:38
La complémention, oui bien sur, bien sur qu'il faut un ide pour coder, la preuve les plus efficaces dans un langage donné s'en serve pas
Marsh Posté le 01-02-2012 à 20:55:00
dzing35 a écrit : Je n'ai pas tout compris avec "momo", "maman" et "test"... |
Salut,
Tout d abord j adore ton code et j aimerais bien m en servir pour mon espace reservation, mais j aimerais bien avoir aussi le moyen de voir le nombre total et pas que la sommes , est ce possible?
En tout cas, merci pour l interet que tu porteras à ce message
Marsh Posté le 28-12-2012 à 14:18:40
bjr je suis en soucis j'ai pris un code (html) et je l'ai modifier ,bon okay sa a marche mais je lai modifier pour quelle ecrive (sa marche toujour) mais quand j'écris dessus sa me met les lettre et chiffres en tout petit alors quelqun peut m'aider a modifier ce code:
<html>
<head>
<title>Calculatrice Simple</title>
<script language="JavaScript">
function verification(entree) {
var car ="1234567890[]()+-.*,/";
for (var i = 0; i < entree.length; i++)
if (car.indexOf(entree.charAt(i))<0 ) return false;
return true;
}
function calcul() {
var a = 0;
if (verification(window.document.calculatrice.result.value))
a = eval(window.document.calculatrice.result.value);
window.document.calculatrice.result.value = a;
}
function ajouter(caracteres) {
window.document.calculatrice.result.value =
window.document.calculatrice.result.value + caracteres;
}
function fonction_speciale(fonction) {
if (verification(window.document.calculatrice.result.value)) {
if(fonction == "sqrt" ) {
var a = 0;
a = eval(window.document.calculatrice.result.value);
window.document.calculatrice.result.value = Math.sqrt(a);
}
if(fonction == "pow" ) {
var a = 0;
a = eval(window.document.calculatrice.result.value);
window.document.calculatrice.result.value = a * a;
}
if(fonction == "log" ) {
var a = 0;
a = eval(window.document.calculatrice.result.value);
window.document.calculatrice.result.value = Math.log(a);
}
} else window.document.calculatrice.result.value = 0
}
</script>
</head>
<body>
<table border bgcolor=#CCCCC>
<th>
<form name="calculatrice">
<center><textarea style="WIDTH: 204px; HEIGHT: 189px; TEXT-ALIGN:right;" name="result" align="left" class="affiche"></textarea><br>
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b2" value="1" onClick="ajouter('1')"size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b3" value="2" onClick="ajouter('2')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b4" value="3" onClick="ajouter('3')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b12" value="4" onClick="ajouter('4')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b5" value="5" onClick="ajouter('5')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b6" value="6" onClick="ajouter('6')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b7" value="7" onClick="ajouter('7')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b11" value="8" onClick="ajouter('8')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b8" value="9" onClick="ajouter('9')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b9" value="/" onClick="ajouter('/')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b10" value="x" onClick="ajouter('X')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b13" value="-" onClick="ajouter('-')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 30px" type="button" name="b14" value="0" onClick="ajouter('0')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 25px; HEIGHT: 30px" type="button" name="b15" value="." onClick="ajouter('.')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 30px; HEIGHT: 24px" type="button" name="b16" value="+" onClick="ajouter('+')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 90px; HEIGHT: 24px" type="reset" name="b17" value="ON/C" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 30px; HEIGHT: 24px" type="button" name="b18" value="=" onClick="calcul()" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button" class="button" value="sqrt " onClick="fonction_speciale('sqrt')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button" class="button" value=" pow " onClick="fonction_speciale('pow')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button" class="button" value=" log " onClick="fonction_speciale('log')">
<center><input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="b2" value="A" onClick="ajouter('A')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="B" value="B" onClick="ajouter('B')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="C" value="C" onClick="ajouter('C')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="D" value="D" onClick="ajouter('D')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="E" value="E" onClick="ajouter('E')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="F" value="F" onClick="ajouter('F')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="G" value="G" onClick="ajouter('G')" size="30"></center>
<center><input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="H" value="H" onClick="ajouter('H')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="I" value="I" onClick="ajouter('I')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="J" value="J" onClick="ajouter('J')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="K" value="K" onClick="ajouter('K')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="L" value="L" onClick="ajouter('L')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="M" value="M" onClick="ajouter('M')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="N" value="N" onClick="ajouter('N')" size="30"></center>
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="O" value="O" onClick="ajouter('O')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="P" value="P" onClick="ajouter('P')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="Q" value="Q" onClick="ajouter('Q')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="R" value="R" onClick="ajouter('R')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="S" value="S" onClick="ajouter('S')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="T" value="T" onClick="ajouter('T')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="U" value="U" onClick="ajouter('U')" size="30"></center>
<center><input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="V" value="V" onClick="ajouter('V')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="W" value="W" onClick="ajouter('W')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="X" value="X" onClick="ajouter('X')"size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="Y" value="Y" onClick="ajouter('Y')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 10px; HEIGHT: 20px" type="button" name="Z" value="Z" onClick="ajouter('Z')" size="30"></center>
</center>
</form>
</th>
</table>
</body>
</html>
Marsh Posté le 26-09-2007 à 14:09:48
Bonjour
Voilà, je cherche a réaliser un formulaire de calcul.
J'ai trouver cette exemple sur internet, mais il ne fonctionne pas, pourquoi ?
Me dire quoi modifier
Merci d'avance
Message édité par twinsen60 le 26-09-2007 à 14:10:22
---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.