[Javascript] Script formulaire

Script qui calcule automatiquement

Sujet résolu

6 septembre 2008 à 18:12:32

Bonjour à tous !

Pourriez vous svp me montrer comment réaliser ce petit script javascript.
J'ai essayé de cherché la réponse sur plusieurs sites de cours javascript mais je ne m'en sors pas.

<html>
<head>

</head>
<body>

<form name="calcul" method="post" action="page2.php">

	Prix de  base : <select name="prix">
		<option value="10">10 euros</option>
		<option value="15">15 euros</option>
		<option value="20">20 euros</option>
	</select><br />

	Un peu mieu : <select name="unpeumieu">
		<option value="yes">Oui</option>
		<option value="no">Non</option>
	</select><br />

	Encore mieu : <select name="encoremieu">
		<option name="yes">Oui</option>
		<option name="no">Non</option>
	</select><br />

	<input type="submit" value="Valider" />

</form>

<SCRIPT language="javascript">

// Définir le prix selon le formulaire "prix"
var prix = 
// Multiplier prix par 1.5 si ("unpeumieu" == yes)

// Multiplier prix par 2 si ("encoremieu" == yes)

// Afficher prix
document.write(prix);

</SCRIPT>

</body>
</html>

Merci d'avance !

Anonyme

7 septembre 2008 à 18:24:39

Dans ta balise xHTML de ton boutton, met le type "button" et met un onclick="mafonction();". Par la suite, tu peux obtenir les valeurs de tes listes déroulantes par un document.getElementById('l'id de ton élément').value (tu mets la valeur dans une variable). Il te reste qu'à faire les calculs mathématiques et des if :-°

goldwallie

14 septembre 2008 à 2:12:39

Merci pour ta réponse mais en fait je voudrai que le seul bouton présent soit "Valider" (donc le prix serait calculé directement lorsque le visiteur change d'option dans un formulaire).

TiToF75

14 septembre 2008 à 9:08:53

voila je t'ai fais un truc rapide,
a toi de poser les conditions maintenant, (si l'un = oui et pas l'autre, si les 2 sont a oui ...)

<html>
<head>

<SCRIPT language="javascript">
function mafonction(toto)
{
		var prix = 0;
		if (document.getElementById('unpeumieu').value == 'yes')
			{
				prix = toto*1.5;
			}
		if (document.getElementById('unpeumieu2').value == 'yes')
			{
				prix = toto*2;
			}
document.getElementById('leprix').innerHTML = prix;
}
</SCRIPT>
</head>
<body>

<form name="calcul" method="post" action="page2.php">

	Prix de  base : <select name="prix" onchange="mafonction(this.value);">
		<option value="0">Votre Choix</option>
		<option value="10">10 euros</option>
		<option value="15">15 euros</option>
		<option value="20">20 euros</option>
	</select><br />

	Un peu mieu : <select name="unpeumieu"  onchange="mafonction(document.getElementById('prix').value);">
		<option value="0">Votre Choix</option>
		<option value="yes">Oui</option>
		<option value="no">Non</option>
	</select><br />
	
	Un peu mieu : <select name="unpeumieu2"  onchange="mafonction(document.getElementById('prix').value);">
		<option value="0">Votre Choix</option>
		<option value="yes">Oui</option>
		<option value="no">Non</option>
	</select><br />
	
	<div id="leprix">ICI</div>



	<input type="submit" value="Valider" />

</form>


</body>
</html>

goldwallie

15 septembre 2008 à 16:34:54

Merci pour ton aide mais je n'ai pas réussi à fonctionner ton code

J'ai donc simplifié tout ça afin d'essayer de comprendre mais je n'arrive même pas à faire marcher ça :

<html>
<head>

<SCRIPT language="javascript">
// On fixe le prix à 0
var prix = 0;
// On crée une fonction qui modifie le prix selon sa variable
function mafonction(toto)
{
		var prix = toto;
}
</SCRIPT>

</head>
<body>

<form name="calcul" method="post" action="page2.php">

	Prix de  base : <select id="prix" onchange="mafonction(this.value);"> <!-- On appelle la fonction quand on change d'option !-->
		<option value="10">10 euros</option>
		<option value="15">15 euros</option>
		<option value="20">20 euros</option>
	</select><br />
	
	<div id="leprix"><SCRIPT language="javascript">document.write(prix);</script></div> <!-- On affiche le prix !-->

</form>

</body>
</html>

Le prix reste bloqué à 0

Anonyme

16 septembre 2008 à 1:08:29

En effet, le prix reste à 0 car lorsque tu l'affiche, la valeur de prix est 0. Si tu actualises le contenu de ton div contenant ton prix, le prix sera le bon

goldwallie

16 septembre 2008 à 5:39:21

Mais comment faire pour qu'il s'actualise automatiquement? :euh:

Anonyme

17 septembre 2008 à 0:43:32

Ajoute dans ta fonction document.getElementById('leprix').innerHTML = toto; .

Tu peux donc supprimer ta ligne qu'il y avait (elle ne sert plus) ainsi que le document.write(prix) qui est dans ton div

birdy42

17 septembre 2008 à 8:17:34

Salut, j'ai trouvé une fonction qui fait ce que tu veux...

<script type="text/javascript">
<!--
function calcul_prix(){
	var toto = document.getElementById("prix");
	var unpeumieu = document.getElementById('unpeumieu');
	var encoremieu = document.getElementById('encoremieu');
	var prixfinal = document.getElementById('leprix');
	var prix = 0;
	prix = toto.value;
	
	
	
	if (unpeumieu.value == 'yes')
		{
			prix = toto.value * 1.5;
		}
	
	if (encoremieu.value == 'yes')
		{
			prix = toto.value * 2;
			
		}
	
	prixfinal.value = prix;
}
-->
</script>

<form method="post" action="page2.php">
<p>
	Prix de  base : 
	<select id="prix" onchange="javascript:calcul_prix();">
		<option value="10" selected="selected">10 euros</option>
		<option value="15">15 euros</option>
		<option value="20">20 euros</option>
	</select><br/>

	Un peu mieu : <select id="unpeumieu" onchange="javascript:calcul_prix();">
		<option value="yes">Oui</option>
		<option value="no" selected="selected">Non</option>
	</select><br />
	
	encoremieux : <select id="encoremieu" onchange="javascript:calcul_prix();">
		<option value="yes">Oui</option>
		<option value="no" selected="selected">Non</option>
	</select><br />
	
	<input type="text" readonly="readonly" id="leprix" value="10"/>
	</p>
</form>

(enfin ce que tu voulais au départ quoi

)

goldwallie

6 octobre 2008 à 3:09:22

Merci beaucoup c'est nikel

V@ldun

6 octobre 2008 à 7:25:11

Ou si tu veux le faire un peu plus correctement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  <title></title>
  <script type="text/javascript">
  function $(id) { return document.getElementById(id) }
  function calcul_prix() {
    var prix = $('prix').value;
    if ($('unpeumieux').checked) prix = prix * 1.5;
    if ($('encoremieux').checked) prix = prix * 2;
    $('prix_final').value = prix;
  }
  </script>

</head>
<body>

  <form method="post" action="" onclick="javascript:calcul_prix();"><p>
    Prix de  base : <select id="prix">
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
    </select> euros<br />

    <input id="unpeumieux" name="unpeumieux" type="checkbox" /> <label for="unpeumieux">Un peu mieux</label><br />
    <input id="encoremieux" name="encoremieux" type="checkbox" /> <label for="encoremieux">Encore mieux</label><br />

    <input id="prix_final" type="text" readonly="readonly" />
  </p></form>

</body>
</html>

goldwallie

29 octobre 2008 à 19:53:48

Citation : V@ldun

Ou si tu veux le faire un peu plus correctement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  <title></title>
  <script type="text/javascript">
  function $(id) { return document.getElementById(id) }
  function calcul_prix() {
    var prix = $('prix').value;
    if ($('unpeumieux').checked) prix = prix * 1.5;
    if ($('encoremieux').checked) prix = prix * 2;
    $('prix_final').value = prix;
  }
  </script>

</head>
<body>

  <form method="post" action="" onclick="javascript:calcul_prix();"><p>
    Prix de  base : <select id="prix">
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
    </select> euros<br />

    <input id="unpeumieux" name="unpeumieux" type="checkbox" /> <label for="unpeumieux">Un peu mieux</label><br />
    <input id="encoremieux" name="encoremieux" type="checkbox" /> <label for="encoremieux">Encore mieux</label><br />

    <input id="prix_final" type="text" readonly="readonly" />
  </p></form>

</body>
</html>

Merci vraiment parfait