Prix qui se change automatiquement

Version imprimable

bonjour a tous alors voila mon problème est que je veut , en fonction du choix de l'utilisateur, le prix se modifie automatique ment en dessous et après passer au paiement mon code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <form method="post" action="traitcom.php"> <table width="80%" border="1"> <tr> <td> <label>Nombres de slots</label> : <select id="slot" name="slot"><option value="10">10</option><option value="12">12</option><option value="15">15</option></select> </td> </tr> <tr> <td> <label>Durée de la location</label> : <select id="tps" name="tps"><option value="1">1 mois</option><option value="2">2 mois</option><option value="3">3 mois</option><option value="6">6 mois</option></select> </td> </tr> </table> </form>
et je pense qu'il faut utiliser onchange mais je ne sais pas pas danq quelle circonstance l'utiliser et je ne suis même pas sur que c'est cette événements qu'il faut utiliser ... si quelqu'un peut éclairer ma lanterne svp :euh:

ps ce que je veut faire exactement : http://www.mtxserv.fr/louer-serveur/minecraft

Bonsoir
Tu n'est pas dans la bonne section.
Mais, ce n'est pas grave !
Si c'est le fonctionnement de cette page que tu veux regarde comment ils font !
Code:

1 2 3 4 5 6 7 $(document).ready(function() { var valPrice = [15.00,25.00,34.00,44.00]; $('#panier_product_month').change(function() { $('#price-value').html(valPrice[slider.slider("value")] * $(this).val() + ' € TTC'); }); });
Tu pourrai faire un truc à ta sauce dans ce style :
Code:

1 2 3 4 5 6 7 8 9 <td> <label>Nombres de slots</label> : <select name="slot" id="slot"><option value="10">10</option><option value="12">12</option><option value="15">15</option></select> </td> <td> <label>Durée de la location</label> : <select name="tps" id="tps"><option value="1">1 mois</option><option value="2">2 mois</option><option value="3">3 mois</option><option value="6">6 mois</option></select> </td> <td> <div id="price">82.5 € TTC</div> </td>
Code:

1 2 3 4 5 6 7 $(document).ready(function() $('#tps,#slot').change(function() { $('#price').html($('#tps').val() *$('#slot').val()*5.50 + ' € TTC'); }); });
Par contre, cela utilise JQuery (librairie javascript courant) qu'il faut ajouter à la page, par exemple le site que tu donne en exemple l'ajoute au niveau du header.

Code:

<script src="/tmcTwitterBootstrapPlugin/js/jquery.min.js" type="text/javascript">

Cordialement,
Patrick Kolodziejczyk.

merci beaucoup de ta reponse alors j'ai sa :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
 
        <title>Boost-serv</title>
		<script src="/tmcTwitterBootstrapPlugin/js/jquery.min.js" type="text/javascript">
$(document).ready(function()
$('#tps,#slot').change(function()
{
$('#price').html($('#tps').val() *$('#slot').val()*5.50 + ' € TTC');
});
});
</script>
    </head>
 
    <body>
 
	 <div id="blocpage">
	<div id="banniere">
	 <img src="logo.jpg" class="logo"></img>
	 <form method="post" action="traitement.php" class="connexion">
    <p>
        <label>Pseudo</label> : <input type="text" name="pseudo" class="pm"/>
 
		<label>Mot de Passe</label> : <input type="password" name="mdp" class="pm" />
		<input type="submit" value="Connexion" class="pm"/>
    </p>
 
</form> 
<nav>
 
                        <li><a href="index.html">Accueil</a></li>
                        <li><a href="#">Nos offres</a></li>
                        <li><a href="#">Serveur démo</a></li>
						 <li><a href="http://www.thc-family.fr/">Forum</a></li>
                        <li><a href="contact.html">Nous contacter</a></li>
 
                </nav>
 
 
	  <img src="banniere.gif" class="ban"></img>
 
	  </div>
 
 
	  <div id="corp">
	  <h2>Vous pouvez maintenant commander votre serveur</h2>
	  <form method="post" action="traitcom.php">
	  <table width="80%" border="1">
	  <td>
   <label>Nombres de slots</label> : <select name="slot" id="slot"><option value="10">10</option><option value="12">12</option><option value="15">15</option></select>
</td>
<td>
   <label>Durée de la location</label> : <select name="tps" id="tps"><option value="1">1 mois</option><option value="2">2 mois</option><option value="3">3 mois</option><option value="6">6 mois</option></select>
</td>
<td>
   <div id="price">82.5 € TTC</div>
</td>
 
 
	  </table>
	  </form>
	  </div>
	  </div>
	  </body>
	  </html>

mais je pense qu'il maque un onchange ou onblur je pense mais je ne vois pas ou le mettre

Regarde si t'as des erreurs avec une console FireBug par exemple.
Par exemple , il est peu probable que tu ai sur ton serveur le fichier jquery à cette emplacement :

Citation:

/tmcTwitterBootstrapPlugin/js/jquery.min.js

Sinon tu doit ouvrir deux balises javascript !
Une pour importer jquery, l'autre pour ajouter ton code :
Code:

1 2 3 4 5 6 7 8 9 <script src="/tmcTwitterBootstrapPlugin/js/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function() $('#tps,#slot').change(function() { $('#price').html($('#tps').val() *$('#slot').val()*5.50 + ' € TTC'); }); });

23/10/2012, 18h32
tanguynoub

Ajout balise [quote]

j'ai une erreur avec firebug :

Citation:

SyntaxError: missing ) after argument list
[Stopper sur une erreur]

});

commande.html (line 14, col 2)

mais je ne comprend pas car cette ligne a l'air juste ...

Utiliser jQuery pour faire une addition ??? :cry:

Code:

1
2
3
4
5
6
7
function calc(){
    document.getElementById('price').innerHTML = document.getElementById('tps').value * document.getElementById('slot').value * 5.5 + ' € TTC';
}
window.onload = function(){
    document.getElementById('tps').onchange = calc;
    document.getElementById('slot').onchange = calc;
};

24/10/2012, 08h28
tanguynoub

moi je ne fait que suivre le guide ^^ tu as une solution ?
24/10/2012, 08h33
Bovino

Citation:

Envoyé par tanguynoub

tu as une solution ?

8O

Le code que j'ai donné, tu crois qu'il fait quoi ? Des crêpes suzette ?
24/10/2012, 08h45
kolodz

Citation:

Envoyé par Bovino

Utiliser jQuery pour faire une addition ??? :cry:

J'ai pris la logique de copier-coller l'exemple fournit !

voici mon code

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
 
        <title>Boost-serv</title>
		<script>
		function calc(){
    document.getElementById('price').innerHTML = document.getElementById('tps').value * document.getElementById('slot').value * 5.5 + ' € TTC';
}
window.onload = function(){
    document.getElementById('tps').onchange = calc;
    document.getElementById('slot').onchange = calc;
};
 
</script>
    </head>
 
    <body>
 
	 <div id="blocpage">
	<div id="banniere">
	 <img src="logo.jpg" class="logo"></img>
	 <form method="post" action="traitement.php" class="connexion">
    <p>
        <label>Pseudo</label> : <input type="text" name="pseudo" class="pm"/>
 
		<label>Mot de Passe</label> : <input type="password" name="mdp" class="pm" />
		<input type="submit" value="Connexion" class="pm"/>
    </p>
 
</form> 
<nav>
 
                        <li><a href="index.html">Accueil</a></li>
                        <li><a href="#">Nos offres</a></li>
                        <li><a href="#">Serveur démo</a></li>
						 <li><a href="http://www.thc-family.fr/">Forum</a></li>
                        <li><a href="contact.html">Nous contacter</a></li>
 
                </nav>
 
 
	  <img src="banniere.gif" class="ban"></img>
 
	  </div>
 
 
	  <div id="corp">
	  <h2>Vous pouvez maintenant commander votre serveur</h2>
	  <br/>
	  <form method="post" action="traitcom.php">
	  <table width="80%" border="1">
	  <td>
   <label>Nombres de slots</label> : <select name="slot" onblur="calc()" id="slot"><option value="10">10</option><option value="12">12</option><option value="15">15</option></select>
</td>
<td>
   <label>Durée de la location</label> : <select name="tps" onblur="calc()" id="tps"><option value="1">1 mois</option><option value="2">2 mois</option><option value="3">3 mois</option><option value="6">6 mois</option></select>
</td>
<td>
   <div id="price">82.5 € TTC</div>
</td>
 
 
	  </table>
	  </form>
	  </div>
	  </div>
	  </body>
	  </html>

mais sa ne marche toujours pas ...

Bonjour,

J'ai copié/collé ton code et ça marche nickel sur FF et chrome.
Mais je ne comprend pas pourquoi tu assignes la fonction dans l'attribut onblur en suite tu l'ajoutes dans l'attribut onchange dans le onload du body?

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
 
        <title>Boost-serv</title>
		<script>
		function calc(){
    document.getElementById('price').innerHTML = document.getElementById('tps').value * document.getElementById('slot').value * 5.5 + ' € TTC';
}
window.onload = function(){calc()}
 
</script>
    </head>
 
    <body>
 
	 <div id="blocpage">
	<div id="banniere">
	 <img src="logo.jpg" class="logo"></img>
	 <form method="post" action="traitement.php" class="connexion">
    <p>
        <label>Pseudo</label> : <input type="text" name="pseudo" class="pm"/>
 
		<label>Mot de Passe</label> : <input type="password" name="mdp" class="pm" />
		<input type="submit" value="Connexion" class="pm"/>
    </p>
 
</form> 
<nav>
 
                        <li><a href="index.html">Accueil</a></li>
                        <li><a href="#">Nos offres</a></li>
                        <li><a href="#">Serveur démo</a></li>
						 <li><a href="http://www.thc-family.fr/">Forum</a></li>
                        <li><a href="contact.html">Nous contacter</a></li>
 
                </nav>
 
 
	  <img src="banniere.gif" class="ban"></img>
 
	  </div>
 
 
	  <div id="corp">
	  <h2>Vous pouvez maintenant commander votre serveur</h2>
	  <br/>
	  <form method="post" action="traitcom.php">
	  <table width="80%" border="1">
	  <td>
   <label>Nombres de slots</label> : <select name="slot" onchange="calc()" id="slot"><option value="10">10</option><option value="12">12</option><option value="15">15</option></select>
</td>
<td>
   <label>Durée de la location</label> : <select name="tps" onchange="calc()" id="tps"><option value="1">1 mois</option><option value="2">2 mois</option><option value="3">3 mois</option><option value="6">6 mois</option></select>
</td>
<td>
   <div id="price">82.5 € TTC</div>
</td>
 
 
	  </table>
	  </form>
	  </div>
	  </div>
	  </body>
	  </html>

A+.

24/10/2012, 15h41
tanguynoub

merci beaucoup tout marche nikel ;) j'adore ce forum ^^
24/10/2012, 15h45
andry.aime

Tu as javascript activé :calim2:?
Tu le testes sur quel navigateur et quelle version?
24/10/2012, 15h47
tanguynoub

j'ai editer mon message tout marche maintenant :)