Calcul dynamique formulaire HTML

Thors1
Invité n'ayant pas de compte PHPfrance

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

Eléphanteau du PHP | 21 Messages

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

ViPHP
AB
ViPHP | 5818 Messages

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.

Eléphanteau du PHP | 21 Messages

01 mars 2010, 23:20

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

Mammouth du PHP | 661 Messages

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

Eléphanteau du PHP | 21 Messages

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

Mammouth du PHP | 661 Messages

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

Eléphanteau du PHP | 21 Messages

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!

Eléphanteau du PHP | 21 Messages

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

Mammouth du PHP | 661 Messages

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;

;)@+