Calcul dynamique formulaire HTML

par **Nours312** » 03 mars 2010, 22:42

Par contre peux tu m'xpliquer le fonctionnement le ! le ? 0 :
je ne comprend pas trop le fonctionnement de cette syntaxe et ca m'aiderai a progresser en javascript je pense merci d'avance!

Ben ça marche de la même manière qu'en php ... ou autres ^^

dans l'exemple if(!vq3.checked) => if(vq3.checked != true)

après pour le ternaire :

var vs3 = (!vq3.checked) ? 0 : vp3;

signifie :

if (!vq3.checked) var vs3 = 0 ;
else var vs3 = vp3;

@+

par **Thors** » 03 mars 2010, 18:48

ok merci ! je vais essayer je n'avais pas encore eu le temps de tester !
Par contre peux tu m'xpliquer le fonctionnement le ! le ? 0 :
je ne comprend pas trop le fonctionnement de cette syntaxe et ca m'aiderai a progresser en javascript je pense merci d'avance!

PS : derniere petite question^^ j'ai rendu certains champs de mon formulaire obligatoire mais comment rendre obligatoire des boutons radio?
Pour les champs input text j'utilise cette fonction

  if (document.forms[0].nom.value.length<1){
  alert("Veuillez renseigner votre nom, Merci");
  document.forms[0].nom.focus();
  return false;}

Pour les boutons radio j'ai tenté mais sans succés..:

 if (document.forms[0].civilite.checked){
  alert("Veuillez renseigner votre civilité, Merci");
  document.forms[0].civilite.focus();
  return false;}

par **Thors** » 03 mars 2010, 18:48

ok merci ! je vais essayer je n'avais pas encore eu le temps de tester !
Par contre peux tu m'xpliquer le fonctionnement le ! le ? 0 :
je ne comprend pas trop le fonctionnement de cette syntaxe et ca m'aiderai a progresser en javascript je pense merci d'avance!

par **Nours312** » 03 mars 2010, 10:14

c'est pour ça que j'ai prix en considération :
[javascript]
var vs3 = (!vq3.checked) ? 0 : vp3;
var vs4 = (!vq4.checked) ? 0 : vp4;
var vs5 = (!vq5.checked) ? 0 : vp5;
[/javascript]
dans la fonction que je t'ai mis au dessus !..

par **Thors** » 02 mars 2010, 22:11

en fait lorsque dans mon code html mes boutons radio n'ont pas la propriété checked="checked" quand je comence a mettre une valeur dans nombre de page = 1 par exemple le compteur ht affichedirecteme 600 ou un peu plus don il comppte directement les 3 valeurs des chanp bouton radio meme si ni oui ou non ne sois cocher.
Je ne sais pas si c'est plus clair...

par **Nours312** » 02 mars 2010, 01:00

Salut ::

j'ai rangé un peu ta fonction JS pour mieux la comprendre, donc te la donnes au passage, ça peut etre utile ^^

cela étant dit, j'ai pas trop compris ou ce situé le problème :$

J'ai "cru comprendre" que tu voulais prendre le calcule des vp3, vp4 et vp5 Que si les raddio q3, q4 et q5 Sont selectionnés ... dans ce cas, il suffisait de les utiliser dans la condition ... et se dire, qu'on se fou de la sélection du "non" ...

[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 vq8 = document.getElementById('q8');
var vq9 = document.getElementById('q9');
var vq10 = document.getElementById('q10');
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) ? 0 : vp3;
var vs4 = (!vq4.checked) ? 0 : vp4;
var vs5 = (!vq5.checked) ? 0 : vp5;
var vs6 = (vq6.value == 0) ? 0 : ((vq6.value == 1) ? vp6 : (vq6.value * vp7)+200);
// semble identique à ::
// var vs6 = (vq6.value == 0) ? 0 : ((vq6.value * vp7)+200);
// mais il y a peut-etre une raison ^^

prixht.value = vs1 + vs2 + vs3 + vs4 + vs5 + vs6;
}
[/javascript]

peux tu mieux décrire le comportement que tu recherches STP !?

par **Thors** » 01 mars 2010, 23:20

ce probléme ne peux donc pas être résolu en javascript?

par AB » 01 mars 2010, 18:00

Oui ça revient à un pb d'algo, ce n'est plus la manipulation et la récupération de tes valeurs en js qui est en cause. Si tu es plus à l'aise avec php ou un autre langage, fait ton principe de fonctionnement dans ce langage et ensuite il suffit de transposer.

par **Thors** » 01 mars 2010, 16:52

il ne faut pas non plus que les valeurs des radion boutons soit initialisé en checked sur les choix non ce que j'ai actuellement fait pour résoudre le probléme..

par **Thors1** » 01 mars 2010, 11:56

<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 vq8 = document.getElementById('q8');
 var vq9 = document.getElementById('q9');
 var vq10 = document.getElementById('q10');
 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;
 if (vq8.checked){
 var vs3 = 0;
 }
 else {
	 var vs3 = vp3;
 }
 if (vq9.checked){
	 vs4 =0;
 }
 else {
	 var vs4 = vp4;
 }
 
 if (vq10.checked){
 var vs5 = 0;
 }
 else {
	 var vs5 = vp5;
 }
 if (vq6.value == 1){
	 var vs6 = vp6;
 }
 else {
	 var vs6 = vq6.value * vp7;
	 vs6=vs6 + 200;
 }
 if (vq6.value == 0){
	 prixht.value = vs1 + vs2 + vs3 + vs4 + vs5;
 }
 else {
 prixht.value = vs1 + vs2 + vs3 + vs4 + vs5 + vs6;
 }
}
</script>

<tr>
					<td style="width: 196px;">Nombres de pages :</td>
					<td><input id='q6' name="nbpages" size="3" type="text" value="0" 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 id='q8' name="recup" value="non" type="radio" onclick="total()" />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 id='q9' name="crea" value="non" type="radio" onclick="total()" />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 id='q10' name="newz" value="non" type="radio" onclick="total()" />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>

voila maintenant cela prend en compte les boutons radio non, le dernier problème au code est que si je rentre une valeur dans un input ou en checked un seul radio il me met le prix des 3 boutons radio additionné et fait les modifications lorsque que je coche le bouton non ce qui m'embête étant donné que je ne veux pas que l'utilisateur sois obliger de répondre au boutons radio..

par **Thors1** » 01 mars 2010, 11:14

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

par AB » 01 mars 2010, 03:10

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

par **Thors** » 01 mars 2010, 02:20

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>

par **Thors** » 01 mars 2010, 01:30

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.

par AB » 28 févr. 2010, 23:46

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

Calcul dynamique formulaire HTML

Répondre

Étendre la vue Revue du sujet : Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML

Re: Calcul dynamique formulaire HTML