Aller au contenu

Créer une page de commande avec une zone de calcul

bp16

Par bp16
dans Scripts et utilitaires

 Partager

Sujets conseillés

bp16

bp16

Posté
Posté

Bonjour,

Je développe un site pour un ami qui produit du vin biologique, je souhaiterais lui mettre en place une page de commande simple dans laquelle l'internaute précise le nombre de bouteilles qu'il souhaite commander.

Voici la page de base que j'ai créée : http://bricepap.free.fr/couronneau/form.htm

J'ai indiqué en rouge les points qui me bloquent. Les formules sont basiques mais je ne les connais pas car je ne développe pas.

Avez-vous des conseils ou des tutoriels à me préconiser pour m'aider à créer cette page ?

Merci d'avance.

MS-DOS_1991

MS-DOS_1991

Posté
Posté (modifié)

Salut :)

Je ne suis pas un expert en javaScript (loin de là :hypocrite: ). Ce code a cependant l'avantage de marcher (avantage indéniable n'est-ce pas? :lol: ) et d'être facilement adaptable (il suffit de changer les variables dans l'appel des fonctions:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Achat de Cartons de Vin</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <!-- <[CDATA[
function calculerPrix(champs, span) {
 var prix;
 prix = champs * 4.50;
 prix = prix + '€';
 document.getElementById(span).innerHTML = prix;
}
function calculerTotal(form, span) {
 var cartons_vin1;
 var cartons_vin2;
 var cartons_vin3;
 var total;
 cartons_vin1 = form.cartons_vin1.value * 4.5;
 cartons_vin2 = form.cartons_vin2.value * 4.5 ;
 cartons_vin3 = form.cartons_vin3.value * 4.5;
 total = Number(cartons_vin1) + Number(cartons_vin2) + Number(cartons_vin3);
 total = total + '€';
 document.getElementById(span).innerHTML = total;
}
// ]]> -->
</script>
 </head>
 <body>
  <div id="contenu_principal">
   <form method="post" action="traitement.php" id="cartons_vins">
    <p><label for="Nom">Votre Nom : <input type="text" name="Nom" id="Nom" value="" /></label></p>
    <p><label for="Prenom">Votre Prénom : <input type="text" name="Prenom" id="Prenom" value="" /></label></p>
    <p><label for="Email">Votre email : <input type="text" name="Email" id="Email" value="" /></label></p>
    <p><label for="Adresse">Votre adresse : <textarea name="Adresse" id="Adresse"></textarea></label></p>
    <p><u>Vin 1</u></p>
    <p><label for="cartons_vin1">Nombre de carton(s) souhaité(s) : 
    <input type="text" name="cartons_vin1" id="cartons_vin1" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin1')" /></label> x 4,50€ = 
    <span id="affichage_prix-vin1"> </span></p>
    <p><u>Vin 2</u></p>
    <p><label for="cartons_vin2">Nombre de carton(s) souhaité(s) : 
    <input type="text" name="cartons_vin2" id="cartons_vin2" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin2')" /></label> x 4,50€ = 
    <span id="affichage_prix-vin2"> </span></p>
    <p><u>Vin 3</u></p>
    <p><label for="cartons_vin3">Nombre de carton(s) souhaité(s) : 
    <input name="cartons_vin3" id="cartons_vin3" type="text" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin3');calculerTotal(this.form, 'affichage_total-vins')" /></label> x 4,50€ = 
    <span id="affichage_prix-vin3"> </span></p>
    <p><strong>Total : </strong>
    <span id="affichage_total-vins"> </span></p>
    <p><input type="submit" value="Envoyer" /><input type="reset" value="Annuler" onClick="razPrix()" /></p>
   </form>
  </div>
 </body>
</html>

edit: Désolé si cela paraît un peu fouillit au premier abord :lol::lol:

Modifié par MS-DOS_1991
bp16

bp16

Posté
  • Auteur
Posté

Alors là je dis Merci !

Ecoute, vraiment merci pour ton aide, c'est nickel. Sauf que.... Arf.... Non juste 2 petits détails :

1. Traitement.php

Cette page récupère les données de façon dynamique de sorte que l'utilisateur n'ai plus qu'à imprimer n'est-pas ? Quel est le code à intégrer dans cette page ? Peut-on avoir sur cette page de récapitulatif de commande un message d'entête tout fait du style :

"Voici le récapitulatif de votre commande. Vous pouvez maintenant l'imprimer et l'envoyer à l'adresse suivante : Blablabla"

2. La valeur zéro par défault

Est-ce possible d'avoir par défault la valeur zéro dans les champs de la page de commande, sinon, le calcul final ne se fait pas...

Merci infiniment pour ton aide, tu me donneras ton adresse et je te ferai parvenir une bonne bouteille :D (sans blague en plus !!)

MS-DOS_1991

MS-DOS_1991

Posté
Posté (modifié)

ReBonjour :)

1. Traitement.php

Cette page récupère les données de façon dynamique de sorte que l'utilisateur n'ai plus qu'à imprimer n'est-pas ? Quel est le code à intégrer dans cette page ? Peut-on avoir sur cette page de récapitulatif de commande un message d'entête tout fait du style :

"Voici le récapitulatif de votre commande. Vous pouvez maintenant l'imprimer et l'envoyer à l'adresse suivante : Blablabla"

Voici le code ;) :

<?php
// Formulaire envoye ? Champs Vides ?
foreach($_POST as $champs => $valeur) {
 if(!isset($valeur) OR empty($valeur)) {
  echo '<script type="text/javascript">// <![CDATA[',"\n",'alert("Veuillez remplir tous les champs.");',"\n",'window.location="http://bricepap.free.fr/couronneau/form.htm";',"\n",'// ]]>',"\n",'</script>'
  exit;
 }
}
// Declaration des variables
$Nom = trim(strip_tags($_POST['Nom']));
$Prenom = trim(strip_tags($_POST['Prenom']));
$Email = trim(strip_tags($_POST['Email']));
$Adresse = trim(strip_tags($_POST['Adresse']));
$NbreCartons['vin1'] = trim(strip_tags($_POST['cartons_vin1']));
$NbreCartons['vin2'] = trim(strip_tags($_POST['cartons_vin2']));
$NbreCartons['vin3'] = trim(strip_tags($_POST['cartons_vin3']));
$SousTotal['vin1'] = $NbreCartons['vin1'] * 4.5;
$SousTotal['vin2'] = $NbreCartons['vin2'] * 4.5;
$SousTotal['vin3'] = $NbreCartons['vin3'] * 4.5;
$Total = $SousTotal['vin1'] + $SousTotal['vin2'] + $SousTotal['vin3'];
?>
<?php echo '<','?xml version="1.0" encoding="ISO-8859-1" ?','>',"\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" dir="ltr">
 <head xml:lang="fr-FR" dir="ltr">
  <title>
   Achat de Cartons de Vin - Récapitulatif de votre Commande
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
  <div id="contenu_principal">
   <h3>Récapitulatif de vos Informations :</h3>
   <p>Votre Nom : <strong><?php echo $Nom; ?></strong></p>
   <p>Votre Prénom : <strong><?php echo $Prenom; ?></strong></p>
   <p>Votre Adresse Email : <strong><?php echo $Email; ?></strong></p>
   <p>Votre Adresse Postale : <strong><?php echo $Adresse; ?></strong></p>
   <h3>Récapitulatif de votre Commande</h3>
   <p>Vous avez commandé <strong><?php echo $NbreCartons['vin1']; ?></strong> cartons du vin n°1, soit un total de <strong><?php echo $SousTotal['vin1']; ?></strong> €.</p>
   <p>Vous avez commandé <strong><?php echo $NbreCartons['vin1']; ?></strong> cartons du vin n°2, soit un total de <strong><?php echo $SousTotal['vin1']; ?></strong> €.</p>
   <p>Vous avez commandé <strong><?php echo $NbreCartons['vin1']; ?></strong> cartons du vin n°3, soit un total de <strong><?php echo $SousTotal['vin1']; ?></strong> €.</p>
   <p style="font-weight: bold; color: #c00000;">Le total de votre commande s'élève donc à <strong><?php echo $Total; ?></strong> €.</p>
   <p><a href="http://bricepap.free.fr/couronneau/form.htm">Modifier vos Informations</a> | <a href="javascript:print()">Imprimer cette Page</a>
  </div>
 </body>
</html>

2. La valeur zéro par défault

Est-ce possible d'avoir par défault la valeur zéro dans les champs de la page de commande, sinon, le calcul final ne se fait pas...

C'est très possible: il suffit de rajouter à la fin de chaque balise <input /> l'attribut value:

<input type="text" name="champs" id="champs" maxlength="2" value="0" />

Merci infiniment pour ton aide, tu me donneras ton adresse et je te ferai parvenir une bonne bouteille biggrin.gif (sans blague en plus !!)

:lol: Je n'y manquerai pas :yoot:

Modifié par MS-DOS_1991
bp16

bp16

Posté
  • Auteur
Posté

Bon. Et ben merci encore quoi !

Ecoute, je viens de tester les 2 pages sur 2 serveurs différents qui gèrent normalement le PHP (Serveur de 1&1 et serveur Free) :

h-tp://www.suzuki-van-van.info/test/form

h-tp://bricepap.free.fr/couronneau/test/form.htm

Essaye de tester, apriori la page de traitement génère une erreur...

Tu as une idée ?

Merci encore à toi !

MS-DOS_1991

MS-DOS_1991

Posté
Posté (modifié)

Honte sur moi !!

J'ai oublié le ; de la ligne 5, dans traitement.php !! :unsure::unsure:

snif... snif.. :lol::lol:

par souci d'esthétique, j'ai amélioré un peu mon code: 

<?php
// Formulaire envoye ? Champs Vides ?
foreach($_POST as $champs => $valeur) {
 if(!isset($valeur) OR empty($valeur)) {
  echo '<script type="text/javascript">// <![CDATA[',"\n",'alert("Veuillez remplir tous les champs.");',"\n",'window.location="http://bricepap.free.fr/couronneau/form.htm";',"\n",'// ]]>',"\n",'</script>';
 }
}
// Declaration des variables
$Nom = trim(strip_tags($_POST['Nom']));
$Prenom = trim(strip_tags($_POST['Prenom']));
$Email = trim(strip_tags($_POST['Email']));
$Adresse = trim(strip_tags($_POST['Adresse']));
$NbreCartons['vin1'] = trim(strip_tags($_POST['cartons_vin1']));
$NbreCartons['vin2'] = trim(strip_tags($_POST['cartons_vin2']));
$NbreCartons['vin3'] = trim(strip_tags($_POST['cartons_vin3']));
$SousTotal['vin1'] = $NbreCartons['vin1'] * 4.5;
$SousTotal['vin2'] = $NbreCartons['vin2'] * 4.5;
$SousTotal['vin3'] = $NbreCartons['vin3'] * 4.5;
$Total = $SousTotal['vin1'] + $SousTotal['vin2'] + $SousTotal['vin3'];
?>
<?php echo '<','?xml version="1.0" encoding="ISO-8859-1" ?','>',"\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" dir="ltr">
 <head xml:lang="fr-FR" dir="ltr">
  <title>
   Achat de Cartons de Vin - Récapitulatif de votre Commande
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
  <div id="contenu_principal">
   <h3>Récapitulatif de vos Informations :</h3>
   <p>Votre Nom : <strong><?php echo $Nom; ?></strong></p>
   <p>Votre Prénom : <strong><?php echo $Prenom; ?></strong></p>
   <p>Votre Adresse Email : <strong><?php echo $Email; ?></strong></p>
   <p>Votre Adresse Postale : <strong><?php echo $Adresse; ?></strong></p>
   <h3>Récapitulatif de votre Commande</h3>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin1']}</strong> carton " : "{$NbreCartons['vin1']} cartons "; ?>du vin n°1, soit un total de <strong><?php echo $SousTotal['vin1']; ?></strong> €.</p>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin2']}</strong> carton " : "{$NbreCartons['vin2']} cartons "; ?>du vin n°2, soit un total de <strong><?php echo $SousTotal['vin2']; ?></strong> €.</p>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin3']}</strong> carton " : "{$NbreCartons['vin3']} cartons "; ?>du vin n°3, soit un total de <strong><?php echo $SousTotal['vin3']; ?></strong> €.</p>
   <p style="font-weight: bold; color: #c00000;">Le total de votre commande s'élève donc à <strong><?php echo $Total; ?></strong> €.</p>
   <p><a href="form.html">Modifier vos Informations</a> | <a href="javascript:print()">Imprimer cette Page</a>
  </div>
 </body>
</html>

=> Le mot carton(s) est au singulier si 1 seul carton est commandé (logique)

Modifié par MS-DOS_1991
bp16

bp16

Posté
  • Auteur
Posté

Et voilà le travail :-)

http://bricepap.free.fr/couronneau/form.htm

Ca marche du feu de dieu !

Par contre... Arf tu vas me tuer :)

En fait, ce qui serait parfait, ce serait d'avoir avant même de renseigner les champs, les sous-totaux et le total général fixé à 0.

Je m'explique: si le gars veux commander seulement le vin 1, il va remplir son adresse et mettre son nombre de carton dans le champs 1, par contre, il ne va pas forcément penser à mettre zéro dans les 2 autres champs... En cliquant sur "envoyer", le message d'erreur va apparaître en je ne suis pas sûr qu'il comprenne pourquoi...

Donc idéalement, ce qui serait top, ce serait que l'on puisse voir la page de récapitulatif de la commande, même si on commande rien :blink: Autrement dit, les seuls champs obligatoires seraient donc le nom, prénom, email et adresse...

Tu vois a peu près ce que je veux dire ?

Tu crois que c'est jouable ?

En tout encore merci de ton aide, j'apprécie vraiment !

MS-DOS_1991

MS-DOS_1991

Posté
Posté

euh... lol tu es sûr d'avoir uploadé tes fichiers ? :lol:

En fait, ce qui serait parfait, ce serait d'avoir avant même de renseigner les champs, les sous-totaux et le total général fixé à 0.

Je l'ai corrigé (démo sur ma page de test: /bp16/form.html)

form.html

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Achat de Cartons de Vin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <!-- <[CDATA[
function calculerPrix(champs, span) {
var prix;
prix = champs * 4.50;
prix = prix + '€';
document.getElementById(span).innerHTML = prix;
}
function calculerTotal(form, span) {
var cartons_vin1;
var cartons_vin2;
var cartons_vin3;
var total;
cartons_vin1 = form.cartons_vin1.value * 4.5;
cartons_vin2 = form.cartons_vin2.value * 4.5 ;
cartons_vin3 = form.cartons_vin3.value * 4.5;
total = Number(cartons_vin1) + Number(cartons_vin2) + Number(cartons_vin3);
document.getElementById(span).innerHTML = '= ' + total + '€';
}
// ]]> -->
</script>
</head>
<body>
<div id="contenu_principal">
<form method="post" action="traitement.php" id="cartons_vins">
<p><label for="Nom">Votre Nom : <input type="text" name="Nom" id="Nom" value="" /></label></p>
<p><label for="Prenom">Votre Prénom : <input type="text" name="Prenom" id="Prenom" value="" /></label></p>
<p><label for="Email">Votre email : <input type="text" name="Email" id="Email" value="" /></label></p>
<p><label for="Adresse">Votre adresse : <textarea name="Adresse" id="Adresse"></textarea></label></p>
<p><u>Vin 1</u></p>
<p><label for="cartons_vin1">Nombre de carton(s) souhaité(s) : 
<input type="text" name="cartons_vin1" id="cartons_vin1" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin1')" value="0" /></label> x 4,50€ <span id="affichage_prix-vin1"> = 0.00€</span></p>
<p><u>Vin 2</u></p>
<p><label for="cartons_vin2">Nombre de carton(s) souhaité(s) : 
<input type="text" name="cartons_vin2" id="cartons_vin2" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin2')" value="0" /></label> x 4,50€ <span id="affichage_prix-vin2"> = 0.00€</span></p>
<p><u>Vin 3</u></p>
<p><label for="cartons_vin3">Nombre de carton(s) souhaité(s) : 
<input type="text" name="cartons_vin3" id="cartons_vin3" size="2" maxlength="2" onBlur="calculerPrix(this.value, 'affichage_prix-vin3');calculerTotal(this.form, 'affichage_total-vins')" value="0" /></label> x 4,50€ <span id="affichage_prix-vin3"> = 0.00€</span></p>
<p><strong>Total : </strong>
<span id="affichage_total-vins"> </span></p>
<p><input type="submit" value="Envoyer" /><input type="reset" value="Annuler" /></p>
</form>
</div>
</body>
</html>

traitement.php

<?php
// Formulaire envoye ? Champs Vides ?
foreach($_POST as $champs => $valeur) {
 if($champs != 'cartons_vin1' AND $champs != 'cartons_vin2' AND $champs != 'cartons_vin3') {
  if(!isset($valeur) OR empty($valeur)) {
   echo '<script type="text/javascript">// <![CDATA[',"\n",'alert("Veuillez remplir tous les champs.");',"\n",'window.location="form.html";',"\n",'// ]]>',"\n",'</script>';
  }
 }
}
// Declaration des variables
$Nom = trim(strip_tags($_POST['Nom']));
$Prenom = trim(strip_tags($_POST['Prenom']));
$Email = trim(strip_tags($_POST['Email']));
$Adresse = trim(strip_tags($_POST['Adresse']));
$NbreCartons['vin1'] = trim(strip_tags($_POST['cartons_vin1']));
$NbreCartons['vin2'] = trim(strip_tags($_POST['cartons_vin2']));
$NbreCartons['vin3'] = trim(strip_tags($_POST['cartons_vin3']));
$SousTotal['vin1'] = $NbreCartons['vin1'] * 4.5;
$SousTotal['vin2'] = $NbreCartons['vin2'] * 4.5;
$SousTotal['vin3'] = $NbreCartons['vin3'] * 4.5;
$Total = $SousTotal['vin1'] + $SousTotal['vin2'] + $SousTotal['vin3'];
?>
<?php echo '<','?xml version="1.0" encoding="ISO-8859-1" ?','>',"\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" dir="ltr">
 <head xml:lang="fr-FR" dir="ltr">
  <title>
   Achat de Cartons de Vin - Récapitulatif de votre Commande
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
  <div id="contenu_principal">
   <h3>Récapitulatif de vos Informations :</h3>
   <p>Votre Nom : <strong><?php echo $Nom; ?></strong></p>
   <p>Votre Prénom : <strong><?php echo $Prenom; ?></strong></p>
   <p>Votre Adresse Email : <strong><?php echo $Email; ?></strong></p>
   <p>Votre Adresse Postale : <strong><?php echo $Adresse; ?></strong></p>
   <h3>Récapitulatif de votre Commande</h3>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin1']}</strong> carton " : "{$NbreCartons['vin1']} cartons "; ?>du vin n°1, soit un total de <strong><?php echo $SousTotal['vin1']; ?></strong> €.</p>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin2']}</strong> carton " : "{$NbreCartons['vin2']} cartons "; ?>du vin n°2, soit un total de <strong><?php echo $SousTotal['vin2']; ?></strong> €.</p>
   <p>Vous avez commandé <?php echo ($NbreCartons['vin1'] == 1) ? "<strong>{$NbreCartons['vin3']}</strong> carton " : "{$NbreCartons['vin3']} cartons "; ?>du vin n°3, soit un total de <strong><?php echo $SousTotal['vin3']; ?></strong> €.</p>
   <p style="font-weight: bold; color: #c00000;">Le total de votre commande s'élève donc à <strong><?php echo $Total; ?></strong> €.</p>
   <p><a href="form.html">Modifier vos Informations</a> | <a href="javascript:print()">Imprimer cette Page</a>
  </div>
 </body>
</html>

bp16

bp16

Posté
  • Auteur
Posté

C'est parfait !

Merci infiniment pour ton aide.

N'hésites pas à me solliciter si tu as besoin de quoique ce soit, ce sera avec grand plaisir !

Encore merci à toi

@+

MS-DOS_1991

MS-DOS_1991

Posté
Posté (modifié)

De rien :)

J'ai moi-même appris plein de choses sur l'opérateur ternaire en voulant t'aider, tout est donc pour le mieux dans le meilleur des mondes :lol::lol:

A+ sur le forum ;)

Modifié par MS-DOS_1991

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...