Forums

Calcul javascript avec listes déroulantes

gaston gaston
1 528 contributions
Membre depuis le 01/03/2001
Envoyé le 07/11/2013 à 18:38
Bonjour,

je cherche à faire des calculs avec javascript dans un formulaire: avec des inputs, no problem, mais avec des select option [:o]

Voici une page html d'exemple:

!doctype html>
<meta charset="UTF-8">
<head>
<script>
function calculcotis(valeur) {
var valeur=parseFloat(valeur,10);
// produit des valeurs.
var nba=parseFloat(document.getElementById('montantmensuel').value) * parseFloat(document.getElementById('nbmois').value);

document.getElementById('montantcotis').value=nba;
}

function calculdu(valeur) { /
// addition des valeurs.
var nba=parseFloat(document.getElementById('montantcotis').value) + parseFloat(document.getElementById('don').value);
document.getElementById('totaldu').value=nba;
}
</script>

<style type="text/css">
div.saisies { background: #f90; width: 20%;}
div.reponses { background: pink; width:20%;}
div.separation { background: grey; width:40%; color: white}

</style>
</head>

<body>
<div class="separation">Calcul avec inputs</div>
<!--- 1er cas: inputs --->
<div class="saisies">
tarif mensuel: <input type="text" size="3" maxlength="3" id="montantmensuel" />
nb de mois: <td><input type="text" size="3" maxlength="3" id="nbmois" /><br/>

<input type="button" size="5" maxlength="10" value="calcul tarif annuel" id="nbmois" onclick="calculcotis(this.value);" />
<input type="text" size="3" id="montantcotis" disabled="disabled" />
</div>
<div class="reponses">
don: <input type="text" size="4" maxlength="4" id="don" />
<br/><input type="button" size="5" maxlength="3" value="calculer total" onclick="calculdu(this.value);" />
Total dû: <input type="text" size="3" id="totaldu" disabled="disabled" />
</div>
<div class="separation">Calcul avec listes déroulantes</div>
<!--- 2è cas: listes déroulantes --->
<div class="saisies">
tarif mensuel: <select id="montantmensuel"width="3"/>
<option value="10">10</option>
<option value="20">40</option>
<option value="30">50</option>
</select>
nb de mois: <select width="3" id="nbmois" />
<option value="10">3</option>
<option value="20">6</option>
<option value="30">9</option>
</select>
<br/>
<input type="button" size="5" maxlength="10" value="calcul tarif annuel" id="nbmois" onclick="calculcotis(this.value);" />
<input type="text" size="3" id="montantcotis" disabled="disabled" />
</div>
<div class="reponses">
don: <input type="text" size="4" maxlength="4" id="don" />
<br/><input type="button" size="5" maxlength="3" value="calculer total" onclick="calculdu(this.value);" />
Total dû: <input type="text" size="3" id="totaldu" disabled="disabled" />
</div>
</body>


Où me tromp'je ?

alerter un modérateur
carpe diem
Bipbipcoyote Bipbipcoyote
3 939 contributions
Membre depuis le 06/03/2001
Envoyé le 07/11/2013 à 20:23 Modifié par Bipbipcoyote
Bonjour,
je te propose ceci , mais attention, le résultat est local et il disparaît si on rafraîchit le navigateur ou si l'on surfe ailleurs car ce n'est pas envoyé vers un serveur pour y être stocké

<!doctype html>
<meta charset="UTF-8">
<head>
<SCRIPT LANGUAGE="javascript">
function afficher(form) {
var nba=parseFloat(document.forms[form].montantmensuel.value) * parseFloat(document.forms[form].nbmois.value);
document.forms[form].total.value=nba;
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form0">
<INPUT TYPE="text" NAME="montantmensuel" VALUE=""> montantmensuel <BR>
<INPUT TYPE="text" NAME="nbmois" VALUE=""> nbmois <BR>
<INPUT TYPE="text" NAME="total" VALUE=""> total <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onClick="afficher(0)"><BR>
</FORM>
<p>
<table border="1" cellspacing ="0">
<FORM NAME="form1">
<t>
<td>Tarif mensuel:
<td><select name="montantmensuel"width="3"/>
<option value="10">10</option>
<option value="20">40</option>
<option value="30">50</option>
</select>
</tr>
<tr>
<td>Nb de mois:
<td><select width="3" name="nbmois" />
<option value="10">3</option>
<option value="20">6</option>
<option value="30">9</option>
</select>
</tr>
<td>Total
<td><INPUT TYPE="text" NAME="total" VALUE="">
<tr>
<td colspan="2" align="center"><INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onClick="afficher(1)"><BR>
</FORM>
</table>
alerter un modérateur
Visitez mon Site Google est mon ami, il répond mieux que moi, posez lui d'abord vos questions
gaston gaston
1 528 contributions
Membre depuis le 01/03/2001
Envoyé le 08/11/2013 à 12:29 Modifié par gaston
Bonjour,
heu ?
avec ton code, en choisissant 10 et 3 on obtient 100 comme résultat ! [:o]

pour le reste, le fait que ce ne soit pas stocké n'est pas un problème: j'ai une procédure qui le fait ensuite en php
alerter un modérateur
carpe diem
Bipbipcoyote Bipbipcoyote
3 939 contributions
Membre depuis le 06/03/2001
Envoyé le 08/11/2013 à 14:33 Modifié par Bipbipcoyote
Bonjour,
bin oui, c'est toi qui as mis des Values montantmensuel 40 value=20 50 value=30 et idem dans nbmois 3 value=10 6 value=20. Cela m'a surpris aussi la première fois, mais ça c'est parce que le cerveau reconstruit ce qu'il voit [:D] on pense faire 3x10 mais en fait on fait 10x10
alerter un modérateur
Visitez mon Site Google est mon ami, il répond mieux que moi, posez lui d'abord vos questions
gaston gaston
1 528 contributions
Membre depuis le 01/03/2001
Envoyé le 08/11/2013 à 15:40 Modifié par gaston
Bonjour,
ah mince ! [:D] [:D] [:D] [:D] [:D]

toutes mes excuses
alerter un modérateur
carpe diem
gaston gaston
1 528 contributions
Membre depuis le 01/03/2001
Envoyé le 08/11/2013 à 18:18 Modifié par gaston
Bonjour,

j'ai regroupé les 2 opérations que je voulais en une seule fonction ça marche nickel !
mais...j'ai encore un problème [:D]

un des select option avec lequel je fais mes calculs doit me servir à envoyer une info dans une table mysql.
Récupérer la valeur d'un select n'est pas qui me bloque
Ce qui me bloque, c'est que je voudrais non pas envoyer la valeur, mais l'id qui correspond à la valeur
je m'explique: tant que je ne faisais pas de calculs, je faisais ceci:


<select>
<option value="1">12 - plein tarif</option>
<option value="2">9 - tarif réduit</option>
</select>

et c'était alors facile de récupérer l'id_cotis

mais pour pouvoir faire les calculs, il faut donner comme value le montant, comme ceci:

<select>
<option value="12">12 - plein tarif</option>
<option value="9">9 - tarif réduit</option>
</select>

(c'est d'ailleurs pour cela que y avait cette erreur dont je parlais au-dessus [:D] : j'avais oublié de remettre les valeurs à la place des id)
et là forcément, y a plus d'id...et je n'ai pas d'idée non plus pour remédier à cela [:o]
sauf bien sûr donner comme valeur à l'id le montant, mais j'aimerais mieux éviter, car il pourrait y avoir des doublons
alerter un modérateur
carpe diem
Bipbipcoyote Bipbipcoyote
3 939 contributions
Membre depuis le 06/03/2001
Envoyé le 08/11/2013 à 19:01
Bonjour,
dans ton code javascript tu peux faire un if sur ce que tu envois et donc cela te replace dans le premier cas. En pseudo-code cela peut donner

si mon_select = ceci alors ma_variable vaut ceci
ma_variable x la_seconde_variable
ou alors ma-variable vaut cela
ma_variable x la_seconde_variable
ou alors.... etc
fin de if

tu déportes ainsi la comparaison dans la fonction
alerter un modérateur
Visitez mon Site Google est mon ami, il répond mieux que moi, posez lui d'abord vos questions

Discussion trop ancienne

Cette discussion a été automatiquement fermée car elle n'a plus reçue de nouveau message depuis trop longtemps.

Nous vous suggérons de créer un nouveau message

« Retour sur la liste des messages de ce forum