Forum d'entraide PHPFrance

Bonjour, voila je suis etudiant en informatique de gestion et j'ai pour projet de faire un formulaire de commande qui est stocké dans une base de donnée.
J'ai terminer ce formulaire HTML avec la gestion PHP et mysql, on me demande désormais d'afficher sur la page en fonction des valeurs que rentres l'utilisateur le prix total HT et le prix total TTC en direct, c'est à dire que si l'utilisateur commande 4page et 3 video par exemple la page doit affiché automatiquement le prix du tout sans avoir à cliquer sur un bouton ou afficher une nouvelle page. Voila je ne sais pas si mon explication est suffisament clair mais je n'ai aucune connaissance en java et je pense que c'est dans ce langage que je parviendrais à réaliser ce qui m'est demander.
Est ce que vous pourriez m'aider svp ?

Merci d'avance.

Salut ::

1. le javascript et le Java sont deux choses différentes !

2. tu as deux options :
2.1. le calcul Javascript :
tu note à un endroit facilement retrouvable le prix du produit, lors du changement de sa quantité, tu multipli l'un par l'autre et tu affiche dans une cellule le résultat
2.2 le calcul et la sauvegarde php :
Lors du chagement du quantitatif produit tu fais une requete Ajax au serveur qui va te retourner le prix de cet élément

l'avantage avec la seconde solution est qu'en cas d'ajout de frais de port, de prix dégressif en fonction de la quantité, ou tout autres paramètres extérieur, php aura beaucoup plus de facilité à te donner un prix réel, sans te taper des lignes infinis de paramètres JavaScript !...

sinon, regarde du coté des Events (pour le changement de l'input quantitatif), de innerHTML (pour écrire dans une cellule, et Ajax si tu utilise ce mode

@+

oula ^^en effet je voulais parler de javascript (pardon de l'erreur d'inatention), pour le reste de ta réponse comme je te disais n'ayant aucune connaissance en javascript je n'ai pas compris grand chose. Je vais essayer de trouver comment fonctionne les opérations en javascript ce sera peux être dèjà un bon début car la je me rend compte que comme je ne connais rien en javascript ca serait casi demander qu'on me le fasse or c'est pas ce que je veux..
merci de ta réponse.

donc si tu n'y connais rien, le plus simple sera surement la première solution !

considérons 3 inputs : dont les id sont respectivement q1(quantitatif) p1(prix en hidden) et s1(somme en lecture seule)

considérons 3 variables JS correspondantes à ces inputs vq1, vp1 et vs1
que tu peux déclarer comme suit : var vq1 = document.getElementById('q1');

pour afficher la somme il te suffit de faire :

vs1.value = vq1.value * vp1.value ;

... pas plus compliqué

après, reste à toi d'optimiser tout ceci, mais je penses que tu est capable de monter une fonction t'évitant des lignes et des lignes de codes rébarbatif ^^

un détail : la concaténation en JS se fait avec un + ex :
var id = 1;
var vq1 = document.getElementById('q'+id);

@++

merci d'avoir répondu, j'ai essayer de suivres vos indications mais visiblement cela ne fonctionne pas avec le code que j'ai rentrer je me suis servi de vos deux réponse pour faire un essai mais je dois avoir louper une chose ....


<script language="JavaScript">
function total(){
var vq1 = document.getElementsByName('photosupp');
var vq2 = document.getElementsByName('videosupp');
var vp1 = 270;
var vp2 = 147;
var vs1 = vq1.value * vp1;
var vs2 = vq2.value * vp2;
document.forms[0].prixht.value = vs1 + vs2;
}
</script>

testes avec document.getElementById() plutôt !!

<script language="JavaScript">
function total(){
 var vq1 = document.getElementsById('q1');
 var vq2 = document.getElementsById('q2');
 var vp1 = 270;
 var vp2 = 147;
 var vs1 = vq1.value * vp1;
 var vs2 = vq2.value * vp2;
 document.forms[0].prixht.value = vs1 + vs2;
}
</script>

 
<tr>
<td style="width: 196px;"><span class="prix">(270&#8364;*)</span>Photos supplémentaires</td>

<td><div><input id="q1" name="photosupp" size="3" type="text" value=0 onekeyup="total()" /></div></td>
</tr>
   
<tr>
<td style="width: 196px;"><span class="prix">(147&#8364;*)</span>Vidéo supplémentaire</td>

<td><div><input id="q2" name="videosupp" size="3" type="text" value=0 onekeyup="total()" /></div></td>
</tr>
<tr>
<td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
  
  <td>&nbsp;</td>
</tr>

Est ce que ce code semble meilleur?

<script language="JavaScript">
function total(){
 var vq1 = document.getElementById('q1');
 var vq2 = document.getElementById('q2');
 var prixht = document.getElementById('prixht');
 var vp1 = 270;
 var vp2 = 147;
 var vs1 = vq1.value * vp1;
 var vs2 = vq2.value * vp2;
 prixht.value = vs1 + vs2;
}
</script>

<table>
<tr>
<td style="width: 196px;"><span class="prix">(270&#8364;*)</span>Photos supplémentaires</td>

<td><div><input id="q1" name="photosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
   
<tr>
<td style="width: 196px;"><span class="prix">(147&#8364;*)</span>Vidéo supplémentaire</td>

<td><div><input id="q2" name="videosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
<tr>
<td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" id="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
 
  <td>&nbsp;</td>
</tr>
</table>

ce code ne fonctionne pas...

Le code que je t'ai donné fonctionne pourtant chez moi sur FF et IE

effectivement excuse moi j'avais fait une erreur dans le remplacement du code merci beaucoup ca m'avance déjà beaucoup malgrès cela je demande encore votre aide si cela ne vous dérange pas.
A ces deux champs input je dois inclure dans mon total ht un autre champ input ou la si dans la case l'utilasateur rentre 1 alor le prix égale a un prix definit (par ex:297€)sinon si la valeur est supérieur à 1 alors la premiere page coute toujours 297 mais toutes les suivantes couteront 97 ce qui en prenant un exemple pour une rentrée de l'utilisateur = 3 alor le calcul devra etre 297+97+97


je doit egalement inclure 3 valeur correspondant aux choix fait par raport a des boutons radio voila le code html et le code javascript (j'ai tenter de faire d'abbord les boutons radio sans succés..)

<tr>
<td style="width: 196px;">Nombres de pages :</td>

<td><input name="nbpages" size="3" type="text" /></td>
</tr>
                
<tr>
<td style="width: 196px;"><span class="prix">(270&#8364;*)</span>Photos supplémentaires</td>

<td><div><input id="q1" name="photosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
   
<tr>
<td style="width: 196px;"><span class="prix">(147&#8364;*)</span>Vidéo supplémentaire</td>

<td><div><input id="q2" name="videosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
                <tr>
<td style="width: 196px;">&nbsp;</td>

<td>&nbsp;</td>
</tr>
<tr>
<td style="width: 196px;"><span class="prix">(27&#8364;*)</span>Récupération logo</td>

<td><label><input id='q3' name="recup" value="oui" type="radio" />oui</label><label><input name="recup" value="non" type="radio" />non</label></td>
</tr>
                
<tr>
                  <td style="width: 196px;"><span class="prix">(157&#8364;*)</span>Création logo</td>
                  
<td><label><input id='q4' name="crea" value="oui" type="radio" />oui</label><label><input name="crea" value="non" type="radio" />non</label></td>
</tr>
<tr>
<td style="width: 196px;"><span class="prix">(167&#8364;*)</span>Newsletter</td>

<td><label><input id='q5' name="newz" value="oui" type="radio" />oui</label><label><input name="newz" value="non" type="radio" />non</label></td>
</tr>
                <tr>
<td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" id="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
 
  <td>&nbsp;</td>
</tr>

<script language="JavaScript">
function total(){
 var vq1 = document.getElementById('q1');
 var vq2 = document.getElementById('q2');
 var vq3 = document.getElementById('q3');
 var vq4 = document.getElementById('q4');
 var vq5 = document.getElementById('q5');
 var prixht = document.getElementById('prixht');
 var vp1 = 270;
 var vp2 = 147;
 var vp3 = 27;
 var vp4 = 157;
 var vp5 = 167;
 var vs1 = vq1.value * vp1;
 var vs2 = vq2.value * vp2;
 var vs3 = vq3.value * vp3;
 var vs4 = vq4.value * vp4;
 var vs5 = vq5.value * vp5;
 prixht.value = vs1 + vs2 + vs3 + vs4 + vs5;
}
</script>

<script language="JavaScript">
function total(){
 var vq1 = document.getElementById('q1');
 var vq2 = document.getElementById('q2');
 var vq3 = document.getElementById('q3');
 var vq4 = document.getElementById('q4');
 var vq5 = document.getElementById('q5');
 var prixht = document.getElementById('prixht');
 var vp1 = 270;
 var vp2 = 147;
 var vp3 = 27;
 var vp4 = 157;
 var vp5 = 167;
 var vs1 = vq1.value * vp1;
 var vs2 = vq2.value * vp2;
 var vs3 = vq3.checked * vp3;
 var vs4 = vq4.checked * vp4;
 var vs5 = vq5.checked * vp5;
 prixht.value = vs1 + vs2 + vs3 + vs4 + vs5;
}
</script>

Edit: je suis parvenu a faire fonctionner le résultat en rajoutant l'evenement onClick sur chaque bouton radio oui avec le 2éme code javascript que j'ai posté maintenant il ne me reste plus qu'a rajouter dans le calcul le champ input ou si la valeur est 1 alor on rajoute tel nombre si c'est plus de 1 alor c'est le deuxieme prix +le prix de la premiere page la il me faudrait de l'aide pour la syntaxe si ca ne dérange pas merci d'avance votre aide m'ai très prècieuse.

Et bien décidement je vous remerci tous pour l'aide que vous m'avez fourni je vien égalment de rèussir le dernier ajout au script je met le code à la suite de ce message, je pense que cela peux être utile aux personnes qui débute comme moi en javascript. Merci encore à tos ceux qui m'ont donné des indices et aide!

   <tr>
     <td style="width: 196px;">Nombres de pages :</td>
     <td><input id='q6' name="nbpages" size="3" type="text" onkeyup="total()" /></td>
    </tr>
                
    <tr>
<td style="width: 196px;"><span class="prix">(270&#8364;*)</span>Photos supplémentaires</td>

<td><div><input id="q1" name="photosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
   
<tr>
<td style="width: 196px;"><span class="prix">(147&#8364;*)</span>Vidéo supplémentaire</td>

<td><div><input id="q2" name="videosupp" size="3" type="text" value="0" onkeyup="total()" /></div></td>
</tr>
                <tr>
     <td style="width: 196px;">&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td style="width: 196px;"><span class="prix">(27&#8364;*)</span>Récupération logo</td>
     <td><label><input id='q3' name="recup" value="oui" type="radio" onclick="total()" />oui</label><label><input name="recup" value="non" type="radio" />non</label></td>
    </tr>
                
    <tr>
                     <td style="width: 196px;"><span class="prix">(157&#8364;*)</span>Création logo</td>
                     <td><label><input id='q4' name="crea" value="oui" type="radio" onclick="total()" />oui</label><label><input name="crea" value="non" type="radio" />non</label></td>
    </tr>
    <tr>
     <td style="width: 196px;"><span class="prix">(167&#8364;*)</span>Newsletter</td>
     <td><label><input id='q5' name="newz" value="oui" type="radio" onclick="total()" />oui</label><label><input name="newz" value="non" type="radio" />non</label></td>
    </tr>
                <tr>
<td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" id="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
 
  <td>&nbsp;</td>
</tr>

<script language="JavaScript">
function total(){
 var vq1 = document.getElementById('q1');
 var vq2 = document.getElementById('q2');
 var vq3 = document.getElementById('q3');
 var vq4 = document.getElementById('q4');
 var vq5 = document.getElementById('q5');
 var vq6 = document.getElementById('q6');
 var prixht = document.getElementById('prixht');
 var vp1 = 270;
 var vp2 = 147;
 var vp3 = 27;
 var vp4 = 157;
 var vp5 = 167;
 var vp6 = 297;
 var vp7 = 97;
 var vs1 = vq1.value * vp1;
 var vs2 = vq2.value * vp2;
 var vs3 = vq3.checked * vp3;
 var vs4 = vq4.checked * vp4;
 var vs5 = vq5.checked * vp5;
 if (vq6.value == 1){
  var vs6 = vp6;
 }
 else {
  var vs6 = vq6.value * vp7;
  vs6=vs6 + 200;
 }
 var vs6 = 
 prixht.value = vs1 + vs2 + vs3 + vs4 + vs5 + vs6;
}
</script>

Oui mais il faudrait que l'on puisse revenir en arrière. Je veux dire que pour l'instant si l'on a cliqué sur une option "oui", l'option "non" est inopérante pour revenir en arrière

oui effectivement je viens de le remarquer et cela est fort fâcheux, aurais tu un indice pour palier à ce problème?