calculs en fonction des cases cochées

Version imprimable

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:

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 ?

Bonjour,

Essaie avec ça :

Code:

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>

19/08/2012, 20h39
crozet.magenta

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:

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

bonjour,
Citation:
Envoyé par crozet.magenta
Code:

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.

Citation:

Envoyé par crozet.magenta

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

Code:

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

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

20/08/2012, 09h30
crozet.magenta

ah ok merci :)