calculs en fonction des cases cochées

**crozet.magenta** · 19/08/2012, 00h22

Bonjour,
je prépare actuellement une page permettant de faire un devis.
j'ai sur ma page un formulaire html composé de cases à cocher correspondant aux options choisies et d'une zone de texte bloquée contenant le prix total.

Ce que je cherche à faire c'est actualiser en temps réel la zone du prix en fonction de ce qui est coché. chaque option augmente le prix de 100

voici ce que j'ai fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
options:<br>
01 <input type="checkbox" name="opt" value="1" onClick="ajout()">
02 <input type="checkbox" name="opt" value="2" onClick="ajout()">
</form>
<form name="result">
<br><br>
</form>
<script language="JavaScript" type="text/JavaScript">
 function ajout()
{
x = x+100;
var resultat = "<TR> <TD> Nom </TD> <TD> <input type=\"text\" name\"nom\" value = \"" + x + "\"> </TD></TR>";
document.result.innerHTML = resultat ;
}
</script>

malheureusement, rien ne se passe...
quelqu'un pourrait-il m'aider svp ?

**jeca** · 19/08/2012, 08h37

Bonjour,

Essaie avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <script type="text/javascript">
          var result = 0;
 
          function ajout(obj, formulaire)
          {
            if (obj.checked)
            {
              result +=100;
            }
            else
            {
              result -=100;
            }
            formulaire.total.value = result;
          }        
        </script>
    </head>
    <body>
      <form name="monFormulaire">
        options:<br>
        01 <input type="checkbox" name="opt" value="1" onclick="ajout(this, this.form)" /><br>
        02 <input type="checkbox" name="opt" value="2" onclick="ajout(this, this.form)" /><br>
        Total : <input type="text" name="total" value="200" readonly="readonly" />
        <br><br>
      </form>
    </body>
</html>

**crozet.magenta** · 19/08/2012, 20h39

c'est parfait !

donc si je comprends bien le script qui se lance dès que une case est cliquée et teste si la case est cochée ou pas et agit en fonction

par contre, quelle est l'utilité de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

**Auteur** · 20/08/2012, 02h21

bonjour,

Envoyé par crozet.magenta

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script language="JavaScript" type="text/JavaScript">
 function ajout()
{
x = x+100;
var resultat = "<TR> <TD> Nom </TD> <TD> <input type=\"text\" name\"nom\" value = \"" + x + "\"> </TD></TR>";
document.result.innerHTML = resultat ;
}
</script>

- pourquoi veux-tu ajouter des éléments de type table (tr et td) alors que ton code HTML ne contient pas de table ?
- si tu souhaites ajouter des cellules dans une table il faut d'abord créer la table ou que la table existe dans la page HTML en cours. Mais dans tous les cas il faut utiliser des fonctions DOM, ne jamais utiliser innerHTML pour ajouter des objets de type table dans une page HTML.

Envoyé par crozet.magenta

c'est parfait !
par contre, quelle est l'utilité de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Réponse ici :
http://xhtml.developpez.com/faq/?pag...efinir_charset

**crozet.magenta** · 20/08/2012, 09h30

ah ok merci

calculs en fonction des cases cochées

JavaScript

Vue hybride

Discussions similaires

Partager

Partager