Prix qui se change automatiquement

**tanguynoub** · 22/10/2012, 18h58

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 :

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
<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

**kolodz** · 22/10/2012, 22h02

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 javascript :

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

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 html :

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

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 javascript :

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

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 html :

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

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

Cordialement,
Patrick Kolodziejczyk.

**tanguynoub** · 23/10/2012, 18h15

merci beaucoup de ta reponse alors j'ai sa :

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
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

**kolodz** · 23/10/2012, 18h26

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 :

/tmcTwitterBootstrapPlugin/js/jquery.min.js

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

Code html :

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

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');
});
});

**tanguynoub** · 23/10/2012, 18h32

j'ai une erreur avec firebug :

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 ...

**Bovino** · 24/10/2012, 08h24

Utiliser jQuery pour faire une addition ???

Code :

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

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;
};

Prix qui se change automatiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager